diff --git a/static/js/emailInbox.js b/static/js/emailInbox.js
index 8ca1a6a3c..a8e2e433a 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 178e92067..dd20d04ff 100644
--- a/static/style.css
+++ b/static/style.css
@@ -29023,8 +29023,10 @@ 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; justify-content: space-between; align-items: baseline; gap: 8px; }
-.email-sender { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.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-sender-clickable { cursor: pointer; }
 .email-sender-clickable:hover { text-decoration: underline; }
 .email-filter-chip {