fix: target actual OWA DOM for Focused/Other tabs and unified header containers

themes/base.css

@@ -164,9 +164,8 @@ html[data-or-hide-promos="true"] [aria-label*="Get the Outlook" i] {
   display: none !important;
 }
 
-/* Focused / Other tabs */
+/* Focused / Other tabs — OWA uses .fui-TabList with .fui-Tab buttons */
-html[data-or-hide-focusedtabs="true"] [role="tablist"][aria-label*="Focused" i],
+html[data-or-hide-focusedtabs="true"] .fui-TabList {
-html[data-or-hide-focusedtabs="true"] [aria-label*="Focused Inbox" i] {
   display: none !important;
 }
 
@@ -308,14 +307,17 @@ html[data-outlook-relook-scheme] [role="treeitem"][aria-current="true"]::before
    UNIFIED HEADER — Collapse all top bars into one compact surface
    data-or-unified-header="true"
 
-   OWA header structure (outlook.cloud.microsoft):
+   OWA header structure (outlook.cloud.microsoft, measured):
-   - Search bar: [role="search"]
+   Row 1: div.Rn_96  — 48px — top bar (logo + search)
-   - Ribbon: [role="toolbar"], .fui-Toolbar, .ms-OverflowSet
+   Row 2: div.root-109 — 36px — ribbon tabs (Home/View/Help)
-   - Tabs: [role="tablist"], .fui-TabList
+   Row 3: toolbar buttons — 40px — ribbon content
-   - Buttons: .ms-Button
+   Row 4: Focused/Other + filters — starts at y=124
+   Total: ~124px of header before email content
+
+   Goal: compress to ~60px total
    ============================================================ */
 
-/* Search bar — shrink to minimum */
+/* --- Row 1: Top bar container (48px → 28px) --- */
 html[data-or-unified-header="true"] [role="search"] {
   height: 24px !important;
   min-height: 24px !important;
@@ -330,28 +332,52 @@ html[data-or-unified-header="true"] [role="search"] input {
   padding: 1px 8px !important;
 }
 
-/* Toolbars — compress to single row, minimal height */
+/* Crush the top bar container's height and padding */
+html[data-or-unified-header="true"] [role="search"],
+html[data-or-unified-header="true"] [role="search"] ~ *,
+html[data-or-unified-header="true"] [role="search"] > * {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+/* --- Row 2: Ribbon tabs (Home/View/Help) (36px → hide or minimize) --- */
+/* The ribbon tab bar uses .ms-OverflowSet as a tablist */
+html[data-or-unified-header="true"] .ms-OverflowSet[role="tablist"] {
+  max-height: 24px !important;
+  min-height: 20px !important;
+  padding: 0 !important;
+}
+
+html[data-or-unified-header="true"] .ms-OverflowSet[role="tablist"] [role="tab"] {
+  padding: 0 6px !important;
+  min-height: 20px !important;
+  max-height: 20px !important;
+  font-size: 11px !important;
+}
+
+/* --- Row 3: Ribbon toolbar content (40px → 26px) --- */
 html[data-or-unified-header="true"] [role="toolbar"],
 html[data-or-unified-header="true"] .fui-Toolbar {
-  max-height: 28px !important;
+  max-height: 26px !important;
   min-height: 24px !important;
   padding: 0 4px !important;
   overflow: hidden !important;
   gap: 0 !important;
 }
 
-/* Toolbar buttons — icons only, minimal size */
 html[data-or-unified-header="true"] [role="toolbar"] button,
 html[data-or-unified-header="true"] [role="toolbar"] .ms-Button,
 html[data-or-unified-header="true"] .fui-Toolbar button {
-  padding: 1px 4px !important;
+  padding: 1px 3px !important;
   min-height: 22px !important;
   max-height: 22px !important;
   min-width: unset !important;
   font-size: 11px !important;
 }
 
-/* Hide button labels — keep icons only */
+/* Hide button text labels — icons only */
 html[data-or-unified-header="true"] [role="toolbar"] .ms-Button-label,
 html[data-or-unified-header="true"] [role="toolbar"] .ms-Button-textContainer,
 html[data-or-unified-header="true"] .fui-Toolbar .ms-Button-label,
@@ -360,7 +386,7 @@ html[data-or-unified-header="true"] .fui-Toolbar .ms-Button-textContainer {
 }
 
 /* Ribbon groups and overflow — compress */
-html[data-or-unified-header="true"] .ms-OverflowSet {
+html[data-or-unified-header="true"] .ms-OverflowSet:not([role="tablist"]) {
   min-height: unset !important;
   gap: 0 !important;
 }
@@ -371,27 +397,36 @@ html[data-or-unified-header="true"] [role="group"] {
   min-height: unset !important;
 }
 
-/* Tab lists (Focused/Other) — minimal */
+/* --- Row 4: Focused/Other tabs (fui-TabList) --- */
-html[data-or-unified-header="true"] [role="tablist"],
 html[data-or-unified-header="true"] .fui-TabList {
-  max-height: 24px !important;
+  max-height: 22px !important;
-  min-height: 22px !important;
+  min-height: 20px !important;
   padding: 0 !important;
   gap: 0 !important;
 }
 
-html[data-or-unified-header="true"] [role="tab"] {
+html[data-or-unified-header="true"] .fui-TabList .fui-Tab {
-  padding: 1px 8px !important;
+  padding: 0 8px !important;
   min-height: 20px !important;
   font-size: 11px !important;
 }
 
-/* Aggressively strip vertical padding from ALL divs in the header region.
+/* --- Strip ALL vertical space from container divs in the header --- */
-   We identify the header region as everything above the message list.
+/* Target every ancestor div between the top of the page and content.
-   Target parent containers of search/toolbar/tablist. */
+   We use the known parent container selectors + general approach. */
-html[data-or-unified-header="true"] [role="search"] ~ div,
+html[data-or-unified-header="true"] [role="search"],
-html[data-or-unified-header="true"] [role="toolbar"] ~ div,
+html[data-or-unified-header="true"] [role="toolbar"],
-html[data-or-unified-header="true"] .fui-Toolbar ~ div {
+html[data-or-unified-header="true"] .fui-Toolbar,
+html[data-or-unified-header="true"] .ms-OverflowSet,
+html[data-or-unified-header="true"] .fui-TabList {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+/* Reduce height on the wrapping containers */
+html[data-or-unified-header="true"] [role="search"] ~ *,
+html[data-or-unified-header="true"] [role="toolbar"] ~ *,
+html[data-or-unified-header="true"] .fui-Toolbar ~ * {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
   margin-top: 0 !important;