Email reader: docked mode flows action cluster UNDER From row

When the modal is docked there's no room to overlay the actions on
the From line. Now:
- From row gets flex-wrap so the action cluster drops to its own
  row below the From label + chevron
- Action cluster goes position:static, flex-basis:100%, no gradient
  fade, no padding-left, left-aligned
- Whole From row pulled up 8px to claim back vertical space
- Header min-height drops back to 0 since buttons no longer
  overlap

Also bumped the gap from From to To/Cc details by 2px (-8 → -6).
This commit is contained in:
pewdiepie-archdaemon
2026-06-11 20:39:22 +09:00
parent 28caa40e68
commit a195f4f194
+25 -6
View File
@@ -28091,15 +28091,33 @@ button .spinner-whirlpool {
position: relative; position: relative;
top: -2px; top: -2px;
} }
/* Docked panes are tighter pull From label and action cluster /* Docked panes are tight flow the action cluster UNDER the
up an extra 2px each. */ From: row instead of overlaying it. Also pull the whole From
row + buttons up 8px to claim back wasted header space. */
.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: -8px;
min-height: 0;
}
.modal.modal-right-docked .email-reader-meta-row.email-reader-meta-from > strong, .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 { .modal.modal-left-docked .email-reader-meta-row.email-reader-meta-from > strong {
top: -4px; top: 0;
} }
.modal.modal-right-docked .email-reader-meta-row.email-reader-meta-from > .email-reader-actions-inline, .modal.modal-right-docked .email-reader-meta-row.email-reader-meta-from > .email-reader-actions-inline,
.modal.modal-left-docked .email-reader-meta-row.email-reader-meta-from > .email-reader-actions-inline { .modal.modal-left-docked .email-reader-meta-row.email-reader-meta-from > .email-reader-actions-inline {
top: -6px; position: static;
flex-basis: 100%;
margin-left: 0;
background: none;
padding-left: 0;
justify-content: flex-start;
}
/* 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;
} }
} }
/* Gmail-style chevron collapsed view shows only From; the chevron /* Gmail-style chevron collapsed view shows only From; the chevron
@@ -28126,9 +28144,10 @@ button .spinner-whirlpool {
.email-reader-meta-details { .email-reader-meta-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* 6px between To and Cc, pulled up 8px to sit close under From. */ /* 6px between To and Cc, pulled up 6px to sit close under From
(2px more breathing room than before). */
gap: 6px; gap: 6px;
margin-top: -8px; margin-top: -6px;
} }
.email-reader-meta-details[hidden] { display: none; } .email-reader-meta-details[hidden] { display: none; }
.email-reader-header > .email-reader-meta { .email-reader-header > .email-reader-meta {