fix: target OWA's actual Fluent UI DOM for density and unified header

themes/base.css

@@ -33,42 +33,63 @@
 
 /* ============================================================
    DENSITY & SPACING
+   Selectors based on OWA's actual Fluent UI DOM structure:
+   - Search bar: [role="search"]
+   - Toolbars: [role="toolbar"], .fui-Toolbar
+   - Tab lists: [role="tablist"], .fui-TabList
+   - Ribbon buttons: .ms-Button, .ms-OverflowSet
+   - Ribbon groups: [role="group"]
    ============================================================ */
 
-/* Compact top bar */
+/* Compact top bar — target the search container and its ancestors */
-html[data-or-compact-topbar="true"] [role="banner"],
+html[data-or-compact-topbar="true"] [role="search"] {
-html[data-or-compact-topbar="true"] header {
+  height: 28px !important;
-  max-height: 36px !important;
+  min-height: 28px !important;
-  min-height: 36px !important;
+  max-height: 28px !important;
+}
+
+html[data-or-compact-topbar="true"] [role="search"] input {
+  height: 24px !important;
+  min-height: 24px !important;
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+}
+
+/* Compact the search bar's parent containers */
+html[data-or-compact-topbar="true"] [role="search"],
+html[data-or-compact-topbar="true"] [role="search"] ~ *,
+html[data-or-compact-topbar="true"] [role="search"] > * {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
 
-html[data-or-compact-topbar="true"] [role="banner"] *,
+/* Compact command bar / ribbon — target Fluent UI toolbars */
-html[data-or-compact-topbar="true"] header * {
+html[data-or-compact-commandbar="true"] [role="toolbar"],
-  font-size: 13px !important;
+html[data-or-compact-commandbar="true"] .fui-Toolbar {
-}
-
-/* Compact search bar inside top bar */
-html[data-or-compact-topbar="true"] [role="search"],
-html[data-or-compact-topbar="true"] [role="search"] input {
-  height: 28px !important;
-  min-height: 28px !important;
-}
-
-/* Compact command bar / ribbon */
-html[data-or-compact-commandbar="true"] [role="toolbar"] {
   padding: 2px 4px !important;
   min-height: unset !important;
   gap: 2px !important;
 }
 
-html[data-or-compact-commandbar="true"] [role="toolbar"] button {
+html[data-or-compact-commandbar="true"] [role="toolbar"] button,
+html[data-or-compact-commandbar="true"] [role="toolbar"] .ms-Button,
+html[data-or-compact-commandbar="true"] .fui-Toolbar button {
   padding: 2px 6px !important;
-  min-height: 28px !important;
+  min-height: 26px !important;
+  max-height: 26px !important;
   font-size: 12px !important;
 }
 
+/* Compact the ribbon overflow/groups */
+html[data-or-compact-commandbar="true"] .ms-OverflowSet {
+  min-height: unset !important;
+}
+
+html[data-or-compact-commandbar="true"] [role="group"] {
+  padding: 0 2px !important;
+  gap: 1px !important;
+}
+
 /* Compact message list */
 html[data-or-compact-messagelist="true"] [role="listbox"] [role="option"],
 html[data-or-compact-messagelist="true"] [role="list"] [role="listitem"] {
@@ -286,78 +307,97 @@ 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):
+   - Search bar: [role="search"]
+   - Ribbon: [role="toolbar"], .fui-Toolbar, .ms-OverflowSet
+   - Tabs: [role="tablist"], .fui-TabList
+   - Buttons: .ms-Button
    ============================================================ */
-html[data-or-unified-header="true"] [role="banner"],
-html[data-or-unified-header="true"] header {
-  max-height: 32px !important;
-  min-height: 32px !important;
-  padding: 0 8px !important;
-  overflow: hidden !important;
-}
 
-/* Collapse the ribbon/menu bar */
+/* Search bar — shrink to minimum */
-html[data-or-unified-header="true"] [role="toolbar"] {
+html[data-or-unified-header="true"] [role="search"] {
-  max-height: 28px !important;
+  height: 24px !important;
-  min-height: 28px !important;
-  padding: 0 4px !important;
-  overflow: hidden !important;
-}
-
-html[data-or-unified-header="true"] [role="toolbar"] button,
-html[data-or-unified-header="true"] [role="toolbar"] [role="button"] {
-  padding: 2px 6px !important;
   min-height: 24px !important;
   max-height: 24px !important;
-  font-size: 11px !important;
-}
-
-/* Collapse tab bars (Focused/Other) */
-html[data-or-unified-header="true"] [role="tablist"] {
-  max-height: 24px !important;
-  min-height: 24px !important;
   padding: 0 !important;
 }
 
-html[data-or-unified-header="true"] [role="tab"] {
+html[data-or-unified-header="true"] [role="search"] input {
-  padding: 2px 8px !important;
+  height: 22px !important;
   min-height: 22px !important;
+  font-size: 12px !important;
+  padding: 1px 8px !important;
+}
+
+/* Toolbars — compress to single row, minimal height */
+html[data-or-unified-header="true"] [role="toolbar"],
+html[data-or-unified-header="true"] .fui-Toolbar {
+  max-height: 28px !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;
+  min-height: 22px !important;
+  max-height: 22px !important;
+  min-width: unset !important;
   font-size: 11px !important;
 }
 
-/* Shrink the search bar */
+/* Hide button labels — keep icons only */
-html[data-or-unified-header="true"] [role="search"],
+html[data-or-unified-header="true"] [role="toolbar"] .ms-Button-label,
-html[data-or-unified-header="true"] [role="search"] input {
+html[data-or-unified-header="true"] [role="toolbar"] .ms-Button-textContainer,
-  height: 24px !important;
+html[data-or-unified-header="true"] .fui-Toolbar .ms-Button-label,
-  min-height: 24px !important;
+html[data-or-unified-header="true"] .fui-Toolbar .ms-Button-textContainer {
-  font-size: 12px !important;
+  display: none !important;
 }
 
-/* Remove any extra spacing/margins between header rows */
+/* Ribbon groups and overflow — compress */
-html[data-or-unified-header="true"] [role="banner"] > div,
+html[data-or-unified-header="true"] .ms-OverflowSet {
-html[data-or-unified-header="true"] header > div {
+  min-height: unset !important;
+  gap: 0 !important;
+}
+
+html[data-or-unified-header="true"] [role="group"] {
+  padding: 0 !important;
+  gap: 0 !important;
+  min-height: unset !important;
+}
+
+/* Tab lists (Focused/Other) — minimal */
+html[data-or-unified-header="true"] [role="tablist"],
+html[data-or-unified-header="true"] .fui-TabList {
+  max-height: 24px !important;
+  min-height: 22px !important;
+  padding: 0 !important;
+  gap: 0 !important;
+}
+
+html[data-or-unified-header="true"] [role="tab"] {
+  padding: 1px 8px !important;
+  min-height: 20px !important;
+  font-size: 11px !important;
+}
+
+/* Aggressively strip vertical padding from ALL divs in the header region.
+   We identify the header region as everything above the message list.
+   Target parent containers of search/toolbar/tablist. */
+html[data-or-unified-header="true"] [role="search"] ~ div,
+html[data-or-unified-header="true"] [role="toolbar"] ~ div,
+html[data-or-unified-header="true"] .fui-Toolbar ~ div {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 
-/* Hide ribbon labels — keep icons only for space saving */
-html[data-or-unified-header="true"] [role="toolbar"] [role="button"] > span:not(:only-child),
-html[data-or-unified-header="true"] [role="toolbar"] button > span:not(:only-child) {
-  font-size: 0 !important;
-  width: 0 !important;
-  overflow: hidden !important;
-}
-
-/* Keep icons visible at normal size */
-html[data-or-unified-header="true"] [role="toolbar"] [role="img"],
-html[data-or-unified-header="true"] [role="toolbar"] svg,
-html[data-or-unified-header="true"] [role="toolbar"] img,
-html[data-or-unified-header="true"] [role="toolbar"] i {
-  font-size: 14px !important;
-  width: auto !important;
-}
-
 
 /* ============================================================
    KEYBOARD NAVIGATION