Email reader: collapse From/To/Cc into a single inline row

Three stacked meta rows wasted vertical space — From, To, Cc now
share one horizontal strip with each label tight to its chips. The
strip itself scrolls horizontally so the action cluster (still
floating top-right) can cover the right edge and the user can drag
to reveal recipients hidden underneath.

This also gives the actions a single shared row, since the meta
no longer dictates a multi-row header height.

static/style.css

@@ -4683,42 +4683,45 @@ body.bg-pattern-sparkles {
            row inside the absolute-positioned actions cluster. */
         display: contents !important;
       }
-      /* Horizontal-scroll recipient chip rows on mobile. */
+      /* Single-row meta strip on mobile — From / To / Cc inline. */
       #email-lib-modal .email-reader-meta,
       .email-reader-tab-modal .email-reader-meta,
       .email-window-modal .email-reader-meta {
-        flex: 1 1 auto !important;
+        display: flex !important;
+        flex-direction: row !important;
+        flex-wrap: nowrap !important;
+        align-items: center !important;
+        gap: 10px !important;
+        overflow-x: auto !important;
+        overflow-y: hidden !important;
         min-width: 0 !important;
         width: 100% !important;
+        scrollbar-width: none !important;
+        padding-right: 110px !important;
+      }
+      #email-lib-modal .email-reader-meta::-webkit-scrollbar,
+      .email-reader-tab-modal .email-reader-meta::-webkit-scrollbar,
+      .email-window-modal .email-reader-meta::-webkit-scrollbar {
+        display: none !important;
       }
       #email-lib-modal .email-reader-meta-row,
       .email-reader-tab-modal .email-reader-meta-row,
       .email-window-modal .email-reader-meta-row {
-        display: flex !important;
+        display: inline-flex !important;
         grid-template-columns: none !important;
         align-items: center !important;
         gap: 6px !important;
-        /* Reserve room on the right so first-row chips don't
+        padding-right: 0 !important;
-           sit fully underneath the actions on first paint. */
-        padding-right: 110px !important;
         min-width: 0 !important;
+        flex: 0 0 auto !important;
       }
       #email-lib-modal .email-reader-meta-row .recipient-chips,
       .email-reader-tab-modal .email-reader-meta-row .recipient-chips,
       .email-window-modal .email-reader-meta-row .recipient-chips {
         display: inline-flex !important;
         flex-wrap: nowrap !important;
-        overflow-x: auto !important;
-        overflow-y: hidden !important;
-        max-width: 100% !important;
-        scrollbar-width: none !important;
         gap: 4px !important;
       }
-      #email-lib-modal .email-reader-meta-row .recipient-chips::-webkit-scrollbar,
-      .email-reader-tab-modal .email-reader-meta-row .recipient-chips::-webkit-scrollbar,
-      .email-window-modal .email-reader-meta-row .recipient-chips::-webkit-scrollbar {
-        display: none !important;
-      }
       #email-lib-modal .email-reader-actions .memory-toolbar-btn.reader-icon-btn,
       .email-reader-tab-modal .email-reader-actions .memory-toolbar-btn.reader-icon-btn,
       .email-window-modal .email-reader-actions .memory-toolbar-btn.reader-icon-btn {
@@ -28028,49 +28031,46 @@ button .spinner-whirlpool {
   background: linear-gradient(to right, transparent 0, var(--bg) 18px);
   padding-left: 22px;
 }
-/* Recipient chip rows scroll horizontally — chips don't wrap onto new
+/* The meta block itself is a SINGLE horizontal row — From / To / Cc
-   lines, they run off the right edge under the action cluster. Touch
+   all flow inline instead of stacking. The whole strip scrolls
-   swipe already works via native overflow; desktop users can scroll
+   horizontally; the action cluster floats above the right edge and
-   with shift+wheel or a horizontal touchpad gesture. */
+   chips that overflow slide underneath. */
+.email-reader-meta {
+  display: flex !important;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+  align-items: center;
+  gap: 14px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  /* Reserve room on the right so the meta strip doesn't immediately
+     hide under the floating action cluster on first paint. */
+  padding-right: 180px;
+}
+.email-reader-meta::-webkit-scrollbar { display: none; }
 .email-reader-meta .recipient-chips {
   display: inline-flex;
   flex-wrap: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
   gap: 4px;
-  max-width: 100%;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  /* Right-pad the inside of the scroller so the last chip can be
-     scrolled fully into view without staying tucked under the
-     action cluster. */
-  padding-right: 0;
 }
-.email-reader-meta .recipient-chips::-webkit-scrollbar { display: none; }
 .email-reader-meta-row {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 6px;
-  min-width: 0;
+  flex: 0 0 auto;
-  /* Reserve space at the right so chips don't immediately collide
+  /* No per-row padding — padding lives on the parent strip. */
-     with the floating action cluster on the very first row. */
+  padding-right: 0;
-  padding-right: 180px;
 }
 .email-reader-header > .email-reader-meta {
   flex: 1; min-width: 0;
+  opacity: 0.85; line-height: 1.7; font-size: 11px;
 }
-.email-reader-meta {
+.email-reader-meta-row strong { opacity: 0.5; font-weight: 600; flex-shrink: 0; min-width: 0; }
-  min-width: 0; opacity: 0.85; line-height: 1.7; font-size: 11px;
-  display: flex; flex-direction: column; gap: 4px;
-}
-.email-reader-meta-row {
-  display: flex; align-items: center; gap: 6px;
-  min-width: 0;
-}
-.email-reader-meta-row strong { opacity: 0.5; font-weight: 600; flex-shrink: 0; min-width: 36px; }
 .email-reader-meta-row > span {
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  white-space: nowrap;
-  min-width: 0; flex: 1;
+  min-width: 0;
 }
 /* Recipient chips */
 .recipient-chips {