Email reader: keep From/To/Cc on separate rows, label tight to chips

Reverted the single-row meta strip — misread the user's ask. Each
meta field gets its own row (From / To / Cc stacked), label sits
tight to the chips on the same line, recipient chips inside the
row still scroll horizontally so long lists slide under the
floating action cluster.

static/style.css

@@ -4683,45 +4683,43 @@ body.bg-pattern-sparkles {
            row inside the absolute-positioned actions cluster. */
         display: contents !important;
       }
-      /* Single-row meta strip on mobile — From / To / Cc inline. */
+      /* Meta on mobile: From / To / Cc each on their own row, label
+         tight to chips, chips scroll horizontally per row. */
       #email-lib-modal .email-reader-meta,
       .email-reader-tab-modal .email-reader-meta,
       .email-window-modal .email-reader-meta {
         display: flex !important;
-        flex-direction: row !important;
+        flex-direction: column !important;
-        flex-wrap: nowrap !important;
+        gap: 2px !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: inline-flex !important;
+        display: flex !important;
         grid-template-columns: none !important;
         align-items: center !important;
         gap: 6px !important;
-        padding-right: 0 !important;
+        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 {
@@ -28031,37 +28029,35 @@ button .spinner-whirlpool {
   background: linear-gradient(to right, transparent 0, var(--bg) 18px);
   padding-left: 22px;
 }
-/* The meta block itself is a SINGLE horizontal row — From / To / Cc
+/* Meta block stacks the From / To / Cc rows; each row keeps label
-   all flow inline instead of stacking. The whole strip scrolls
+   tight to its chip(s) on the same line. The recipient-chips inside
-   horizontally; the action cluster floats above the right edge and
+   scroll horizontally so long lists slide under the floating action
-   chips that overflow slide underneath. */
+   cluster on the right. */
 .email-reader-meta {
-  display: flex !important;
+  display: flex;
-  flex-direction: row !important;
+  flex-direction: column;
-  flex-wrap: nowrap !important;
+  gap: 2px;
-  align-items: center;
+  min-width: 0;
-  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;
 }
+.email-reader-meta .recipient-chips::-webkit-scrollbar { display: none; }
 .email-reader-meta-row {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 6px;
-  flex: 0 0 auto;
+  min-width: 0;
-  /* No per-row padding — padding lives on the parent strip. */
+  /* Reserve space on the right so chips don't sit fully under the
-  padding-right: 0;
+     floating action cluster on first paint. */
+  padding-right: 180px;
 }
 .email-reader-header > .email-reader-meta {
   flex: 1; min-width: 0;