mirror of
https://github.com/pewdiepie-archdaemon/odysseus.git
synced 2026-06-17 10:15:27 -04:00
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.
This commit is contained in:
+20
-59
@@ -28212,6 +28212,8 @@ button .spinner-whirlpool {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
/* Positioning context for the absolute action cluster. */
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.email-reader-meta .recipient-chips {
|
.email-reader-meta .recipient-chips {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
@@ -28230,17 +28232,6 @@ button .spinner-whirlpool {
|
|||||||
gap: 6px;
|
gap: 6px;
|
||||||
min-width: 0;
|
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 {
|
.email-reader-meta-row.email-reader-meta-from {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -28323,60 +28314,30 @@ button .spinner-whirlpool {
|
|||||||
box-shadow: -6px 0 12px -6px rgba(0, 0, 0, 0.25);
|
box-shadow: -6px 0 12px -6px rgba(0, 0, 0, 0.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/* Desktop only: shift the whole From row up 6px. Mobile keeps the
|
/* Docked panes: cluster flows under From + details (no overlay)
|
||||||
original placement (the mobile @media block overrides padding so
|
since there's not enough horizontal room. Killed the desktop-only
|
||||||
the header sits flush already). */
|
from-row min-height / strong nudges from the old grid layout — the
|
||||||
@media (min-width: 769px) {
|
block-flow meta doesn't need them anymore. */
|
||||||
/* From row needs to be at least as tall as the absolute-
|
.modal.modal-right-docked .email-reader-meta > .email-reader-actions-inline,
|
||||||
positioned action cluster (44px buttons) so the buttons
|
.modal.modal-left-docked .email-reader-meta > .email-reader-actions-inline {
|
||||||
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;
|
position: static;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
background: none;
|
background: none;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
box-shadow: none;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
min-width: 0;
|
||||||
/* Docked header gets a smaller min-height since the action cluster
|
max-width: none;
|
||||||
no longer needs vertical room overlapping the chip. */
|
}
|
||||||
.modal.modal-right-docked .email-reader-header,
|
.modal.modal-right-docked .email-reader-meta-row.email-reader-meta-from,
|
||||||
.modal.modal-left-docked .email-reader-header {
|
.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;
|
min-height: 0;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
/* Accent-tint the email-search (from-sender) magnifying glass so
|
/* Accent-tint the email-search (from-sender) magnifying glass so
|
||||||
it reads as a deliberate search action against the other icons. */
|
it reads as a deliberate search action against the other icons. */
|
||||||
|
|||||||
Reference in New Issue
Block a user