From 1eca28e5889ebb9c113fe52cb644cf076a447bb0 Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Wed, 10 Jun 2026 22:55:10 +0900
Subject: [PATCH] Email: revert single-row email-item; account chips single-row
 at all widths
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Revert the email row layout — sender/date stay above subject again,
  matching the original two-line item that the user actually wanted.
- The account filter chips (#email-lib-accounts) wrapped onto multiple
  rows on desktop. Promote the mobile-only horizontal-scroll rule to
  apply at every breakpoint so the chips always sit on one row with
  overflow scroll, regardless of screen size.
---
 static/js/emailInbox.js |  2 +-
 static/style.css        | 37 +++++++++++++++++--------------------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/static/js/emailInbox.js b/static/js/emailInbox.js
index a8e2e433a..8ca1a6a3c 100644
--- a/static/js/emailInbox.js
+++ b/static/js/emailInbox.js
@@ -521,9 +521,9 @@ function _createEmailItem(em) {
     <div class="email-item-content">
       <div class="email-item-top">
         <span class="email-sender email-sender-clickable" style="color:${color}" data-from-addr="${_esc(senderAddr)}" data-from-name="${_esc(senderName)}" title="Show all emails from ${_esc(senderName)}">${_esc(senderName)}</span>
-        <span class="email-subject">${_esc(em.subject)}${unreadIcon}${attachIcon}${tagPills}${spamTag}</span>
         <span class="email-date">${_esc(dateStr)}</span>
       </div>
+      <div class="email-subject">${_esc(em.subject)}${unreadIcon}${attachIcon}${tagPills}${spamTag}</div>
     </div>
     <div class="email-menu-wrap">
       <button class="hamburger email-menu-btn" title="Actions">
diff --git a/static/style.css b/static/style.css
index 8093c1b06..313d3bb9a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -29023,10 +29023,8 @@ body.doc-find-active mark.doc-find-mark.current {
   font-size: 12px; font-weight: 600; flex-shrink: 0; margin-top: 1px;
 }
 .email-item-content { flex: 1; min-width: 0; overflow: hidden; }
-.email-item-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
-.email-sender { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; max-width: 35%; }
-.email-item-top .email-subject { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.email-item-top .email-date { flex-shrink: 0; margin-left: auto; }
+.email-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
+.email-sender { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .email-sender-clickable { cursor: pointer; }
 .email-sender-clickable:hover { text-decoration: underline; }
 .email-filter-chip {
@@ -33853,24 +33851,23 @@ button.cal-add-btn.cal-add-btn-text.cal-add-btn-sm:hover .cal-add-label {
 /* Only the direct-child compose button gets pushed right; nested chips
    inside #email-lib-accounts pack to the left as normal flex items. */
 .email-accounts-row > .memory-toolbar-btn { flex-shrink: 0; margin-left: auto; }
-#email-lib-accounts { justify-content: flex-start; flex-wrap: wrap; }
-/* Mobile: collapse the account chips to a single horizontally-scrollable
-   strip instead of stacking onto multiple rows. The compose "New" button
-   stays outside the scroller (it's a sibling of #email-lib-accounts inside
+/* Account chips collapse to a single horizontally-scrollable strip
+   at every breakpoint, instead of stacking onto multiple rows when
+   there are several accounts. The compose "New" button stays outside
+   the scroller (it's a sibling of #email-lib-accounts inside
    .email-accounts-row) so it remains pinned on the right. */
-@media (max-width: 768px) {
-  #email-lib-accounts {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    scroll-snap-type: x proximity;
-    -webkit-overflow-scrolling: touch;
-  }
-  #email-lib-accounts::-webkit-scrollbar { display: none; height: 0; }
-  #email-lib-accounts > * { flex-shrink: 0; scroll-snap-align: start; }
+#email-lib-accounts {
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  scroll-snap-type: x proximity;
+  -webkit-overflow-scrolling: touch;
 }
+#email-lib-accounts::-webkit-scrollbar { display: none; height: 0; }
+#email-lib-accounts > * { flex-shrink: 0; scroll-snap-align: start; }
 .email-accounts-loading-whirlpool {
   width: 14px;
   height: 14px;