Salastil/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-06-16 01:35:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Email reader: all actions on the From row, wrap when narrow

Browse Source 
Found the culprit — the docked-modal CSS forced .email-reader-meta-row
into a single-column grid, which collapsed the From row into a
vertical stack and pushed the action buttons below it.

Fix:
- Merged the primary + secondary action rows into one flat
  .email-reader-actions-inline cluster inside the From row
- Made the cluster flex-wrap so it stays inline when undocked and
  wraps below the chip when truly cramped (docked, narrow tab)
- Excluded .email-reader-meta-from from the docked-modal and
  narrow-docpane grid-stack rules — those overrides now only
  apply to the To/Cc detail rows
This commit is contained in:
pewdiepie-archdaemon
2026-06-11 20:07:35 +09:00
parent 156009f9ad
commit d30b2d11e6
2 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/emailLibrary.js
+6 -8
View File
@@ -4911,17 +4911,15 @@ async function _openEmailWindow(em, folder) {
<div class="email-reader-meta-row email-reader-meta-from">
<strong>From:</strong>
<span class="recipient-chips">${fromChip}${(data.to || data.cc) ? `<button class="email-reader-meta-toggle" type="button" aria-expanded="false" title="Show recipients"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></button>` : ''}</span>
<div class="email-reader-actions-row email-reader-actions-row-primary">
<div class="email-reader-actions-inline">
<button class="memory-toolbar-btn reader-icon-btn" data-act="reply" title="Reply"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg><span class="reader-btn-label">Reply</span></button>
${_hasMultipleRecipients(data) ? `<button class="memory-toolbar-btn reader-icon-btn" data-act="reply-all" title="Reply All"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 17 2 12 7 7"/><polyline points="12 17 7 12 12 7"/><path d="M22 18v-2a4 4 0 0 0-4-4H7"/></svg><span class="reader-btn-label">Reply all</span></button>` : ''}
<button class="memory-toolbar-btn reader-icon-btn" data-act="forward" title="Forward"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 17 20 12 15 7"/><path d="M4 18v-2a4 4 0 0 1 4-4h12"/></svg><span class="reader-btn-label">Forward</span></button>
</div>
</div>
<div class="email-reader-actions-row email-reader-actions-row-secondary">
<button class="memory-toolbar-btn reader-icon-btn" data-act="summarize" title="Summarize">${_summaryIcon(data)}<span class="reader-btn-label">Summary</span></button>
<button class="memory-toolbar-btn reader-icon-btn" data-act="ai-reply" title="${data.cached_ai_reply ? 'AI Reply (cached draft ready)' : 'AI Reply (suggest a draft)'}">${_aiReplyIcon(data)}<span class="reader-btn-label">AI reply</span></button>
<div class="email-reader-more-wrap" style="position:relative">
<button class="memory-toolbar-btn reader-icon-btn" data-act="more" title="More actions"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg><span class="reader-btn-label">More</span></button>
<button class="memory-toolbar-btn reader-icon-btn" data-act="ai-reply" title="${data.cached_ai_reply ? 'AI Reply (cached draft ready)' : 'AI Reply (suggest a draft)'}">${_aiReplyIcon(data)}<span class="reader-btn-label">AI reply</span></button>
<button class="memory-toolbar-btn reader-icon-btn" data-act="summarize" title="Summarize">${_summaryIcon(data)}<span class="reader-btn-label">Summary</span></button>
<div class="email-reader-more-wrap" style="position:relative">
<button class="memory-toolbar-btn reader-icon-btn" data-act="more" title="More actions"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg><span class="reader-btn-label">More</span></button>
</div>
</div>
</div>
${(data.to || data.cc) ? `<div class="email-reader-meta-details" hidden>
static/style.css
+20 -11
View File
@@ -15225,8 +15225,11 @@ body.right-dock-active:not(.email-doc-split-active) .doc-editor-pane {
background: none;
padding-left: 0;
}
.modal.modal-right-docked .email-reader-meta-row,
.modal.modal-left-docked .email-reader-meta-row {
/* Docked modal: From row stays a flex row so the action cluster
sits next to From (or wraps below it when truly cramped). Only
the To/Cc detail rows get the grid stack. */
.modal.modal-right-docked .email-reader-meta-row:not(.email-reader-meta-from),
.modal.modal-left-docked .email-reader-meta-row:not(.email-reader-meta-from) {
display: grid;
grid-template-columns: 1fr;
gap: 2px;
@@ -28044,17 +28047,23 @@ button .spinner-whirlpool {
gap: 6px;
min-width: 0;
}
/* Primary action row (Reply / Reply-all / Forward) lives INSIDE
the From row and gets pushed to the right edge. */
.email-reader-meta-row.email-reader-meta-from > .email-reader-actions-row-primary {
/* All action buttons live INSIDE the From row, right-aligned. When
there's room (undocked) they sit on the same row as From; when
docked or narrow they wrap below it. */
.email-reader-meta-row.email-reader-meta-from > .email-reader-actions-inline {
margin-left: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 4px;
flex-shrink: 0;
}
/* Secondary action row (Summary / AI / More) sits below the From
row as a sibling, right-aligned. */
.email-reader-meta > .email-reader-actions-row-secondary {
justify-content: flex-end;
margin-top: 2px;
/* From row allows the action cluster to wrap below when narrow. */
.email-reader-meta-row.email-reader-meta-from {
flex-wrap: wrap;
row-gap: 2px;
}
/* Gmail-style chevron — collapsed view shows only From; the chevron
reveals the To/Cc details inline below. */
@@ -28165,7 +28174,7 @@ button .spinner-whirlpool {
background: none;
padding-left: 0;
}
.email-reader-meta-row {
.email-reader-meta-row:not(.email-reader-meta-from) {
display: grid;
grid-template-columns: 1fr;
gap: 2px;