Email reader: prune competing rules from grid-era refactor

Dropped the @media(769px) from-row min-height + align-items:center
and the strong > top:-2px nudge — leftovers from the grid layout
that were forcing extra height and label offsets the block-flow
meta doesn't need.

Consolidated docked overrides into a single flat block (no @media
wrapper) and merged the two .email-reader-meta declarations into
one. Same visual result, much less competing CSS to debug.

static/style.css

@@ -28212,6 +28212,8 @@ button .spinner-whirlpool {
   flex-direction: column;
   gap: 2px;
   min-width: 0;
+  /* Positioning context for the absolute action cluster. */
+  position: relative;
 }
 .email-reader-meta .recipient-chips {
   display: inline-flex;
@@ -28230,17 +28232,6 @@ button .spinner-whirlpool {
   gap: 6px;
   min-width: 0;
 }
-/* Meta is a plain block stack — From row, then To/Cc details right
-   below — with the action cluster absolute-positioned in the top
-   right. Out of flow means the cluster's height (1 row vs 2 rows
-   vs absolute overlay) never reshapes the From/details row spacing,
-   so To/Cc always hugs From the same way regardless of the cluster's
-   current state. Padding-right on the rows reserves the chip area
-   that the cluster occupies, and is tightened per container query
-   below. */
-.email-reader-meta {
-  position: relative;
-}
 .email-reader-meta-row.email-reader-meta-from {
   position: relative;
   flex-wrap: wrap;
@@ -28323,60 +28314,30 @@ button .spinner-whirlpool {
     box-shadow: -6px 0 12px -6px rgba(0, 0, 0, 0.25);
   }
 }
-/* Desktop only: shift the whole From row up 6px. Mobile keeps the
-   original placement (the mobile @media block overrides padding so
-   the header sits flush already). */
-@media (min-width: 769px) {
-  /* From row needs to be at least as tall as the absolute-
-     positioned action cluster (44px buttons) so the buttons
-     don't overflow the header bottom. */
-  .email-reader-meta-row.email-reader-meta-from {
-    min-height: 44px;
-    align-items: center;
-  }
-  /* Nudge the "From:" label up 2px to baseline-balance against
-     the lifted action cluster. */
-  .email-reader-meta-row.email-reader-meta-from > strong {
-    position: relative;
-    top: -2px;
-  }
-  /* Docked panes are tight — flow the action cluster UNDER the
-     From: row instead of overlaying it. The whole From row +
-     chip sits 4px lower than the old -8 position so the chip
-     baseline tracks the "From:" label cleanly. */
-  .modal.modal-right-docked .email-reader-meta-row.email-reader-meta-from,
-  .modal.modal-left-docked .email-reader-meta-row.email-reader-meta-from {
-    flex-wrap: wrap;
-    margin-top: -4px;
-    min-height: 0;
-  }
-  .modal.modal-right-docked .email-reader-meta-row.email-reader-meta-from > strong,
-  .modal.modal-left-docked .email-reader-meta-row.email-reader-meta-from > strong {
-    top: 0;
-  }
-  /* Docked: ditch the grid layout for a simple flex column so the
-     action cluster naturally flows last — below From, and below
-     To/Cc when expanded. */
-  .modal.modal-right-docked .email-reader-meta,
-  .modal.modal-left-docked .email-reader-meta {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .modal.modal-right-docked .email-reader-meta > .email-reader-actions-inline,
-  .modal.modal-left-docked .email-reader-meta > .email-reader-actions-inline {
-    position: static;
-    margin-top: 4px;
-    background: none;
-    padding-left: 0;
-    justify-content: flex-end;
-  }
-  /* Docked header gets a smaller min-height since the action cluster
-     no longer needs vertical room overlapping the chip. */
-  .modal.modal-right-docked .email-reader-header,
-  .modal.modal-left-docked .email-reader-header {
-    min-height: 0;
-  }
+/* Docked panes: cluster flows under From + details (no overlay)
+   since there's not enough horizontal room. Killed the desktop-only
+   from-row min-height / strong nudges from the old grid layout — the
+   block-flow meta doesn't need them anymore. */
+.modal.modal-right-docked .email-reader-meta > .email-reader-actions-inline,
+.modal.modal-left-docked .email-reader-meta > .email-reader-actions-inline {
+  position: static;
+  margin-top: 4px;
+  background: none;
+  padding-left: 0;
+  box-shadow: none;
+  justify-content: flex-end;
+  min-width: 0;
+  max-width: none;
+}
+.modal.modal-right-docked .email-reader-meta-row.email-reader-meta-from,
+.modal.modal-left-docked .email-reader-meta-row.email-reader-meta-from,
+.modal.modal-right-docked .email-reader-meta > .email-reader-meta-details,
+.modal.modal-left-docked .email-reader-meta > .email-reader-meta-details {
+  padding-right: 0;
+}
+.modal.modal-right-docked .email-reader-header,
+.modal.modal-left-docked .email-reader-header {
+  min-height: 0;
 }
 /* Accent-tint the email-search (from-sender) magnifying glass so
    it reads as a deliberate search action against the other icons. */