Salastil/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-06-17 10:15:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

Email reader: move action toolbar to the TOP, meta below

Browse Source 
Was: from/to/cc/date meta on the left, action cluster (Reply / Reply
all / Forward / AI reply / Summary / More) pinned to the right of
the header. Now: actions stretch across the top in their two existing
sub-rows, the from/to/cc meta sits below.

Pure CSS — no template restructure. The .email-reader-header flexbox
flips to flex-direction:column, .email-reader-actions gets order:-1
to render first, and the existing flex-end aligned action-row rules
swap to flex-start so buttons read left-to-right across the top
toolbar. Mobile media query overrides bend the same way so the
layout is consistent across breakpoints.
This commit is contained in:
pewdiepie-archdaemon
2026-06-11 18:48:34 +09:00
parent e310336a42
commit 15f2b106ab
1 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+26 -10
View File
@@ -4651,20 +4651,21 @@ body.bg-pattern-sparkles {
.email-window-modal .email-reader-header { .email-window-modal .email-reader-header {
padding: 8px 8px !important; padding: 8px 8px !important;
gap: 6px !important; gap: 6px !important;
flex-direction: row !important; /* Mobile keeps the same actions-on-top layout as desktop. */
align-items: flex-start !important; flex-direction: column !important;
align-items: stretch !important;
} }
#email-lib-modal .email-reader-actions, #email-lib-modal .email-reader-actions,
.email-reader-tab-modal .email-reader-actions, .email-reader-tab-modal .email-reader-actions,
.email-window-modal .email-reader-actions { .email-window-modal .email-reader-actions {
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: column !important;
align-items: flex-end !important; align-items: flex-start !important;
gap: 4px !important; gap: 4px !important;
margin-left: auto !important; margin-left: 0 !important;
flex-shrink: 0 !important; flex-shrink: 0 !important;
position: relative !important; position: static !important;
top: -3px !important; /* lift the reply/forward/etc. action buttons up on mobile */ order: -1 !important; /* render above the meta */
} }
#email-lib-modal .email-reader-actions-row, #email-lib-modal .email-reader-actions-row,
.email-reader-tab-modal .email-reader-actions-row, .email-reader-tab-modal .email-reader-actions-row,
@@ -4673,8 +4674,9 @@ body.bg-pattern-sparkles {
flex-direction: row !important; flex-direction: row !important;
flex-wrap: nowrap !important; flex-wrap: nowrap !important;
align-items: center !important; align-items: center !important;
justify-content: flex-end !important; justify-content: flex-start !important;
gap: 4px !important; gap: 4px !important;
width: 100% !important;
} }
#email-lib-modal .email-reader-actions .memory-toolbar-btn.reader-icon-btn, #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-reader-tab-modal .email-reader-actions .memory-toolbar-btn.reader-icon-btn,
@@ -27959,14 +27961,28 @@ button .spinner-whirlpool {
} }
.email-reader-header { .email-reader-header {
display: flex; display: flex;
flex-direction: row; /* Actions sit ABOVE the from/to/cc meta — top toolbar pattern. The
align-items: flex-start; existing two action-rows inside .email-reader-actions keep their
gap: 12px; vertical stacking (Reply/Reply-all/Forward/AI on one row, then
Summary/More on another) so nothing has to combine. */
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 10px 14px; padding: 10px 14px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: var(--bg); background: var(--bg);
flex-shrink: 0; flex-shrink: 0;
} }
.email-reader-header > .email-reader-actions {
order: -1; /* render first inside the column */
margin-left: 0;
align-items: flex-start;
width: 100%;
}
.email-reader-header > .email-reader-actions > .email-reader-actions-row {
justify-content: flex-start;
width: 100%;
}
.email-reader-header > .email-reader-meta { .email-reader-header > .email-reader-meta {
flex: 1; min-width: 0; flex: 1; min-width: 0;
} }