diff --git a/static/style.css b/static/style.css
index d633b10..22b36dc 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1385,12 +1385,14 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
   .nav-panel > .unit-toggle { margin: 0; width: 100%; align-self: stretch; }
   .nav-panel > .unit-toggle button { flex: 1; }
 
-  /* Account row (bell + account/Sign in) spans the dropdown; the account button
-     keeps its label and fills, the bell stays a fixed square. Popovers open below,
-     clamped to the viewport so the notification list never overflows. */
-  .nav-panel > .acct { margin: 0; width: 100%; align-self: stretch; }
-  .nav-panel > .acct .acct-menu { flex: 1; }
-  .nav-panel > .acct .acct-btn:not(.notif-btn) { width: 100%; justify-content: center; }
+  /* Account row (bell + account/Sign in): a compact chip that hugs its label and
+     sits beside the bell, centered in the dropdown, rather than a full-width bar.
+     The 40px min-height stays for the tap target; padding and truncation tighten
+     so the long email no longer dominates. Popovers open below, clamped to the
+     viewport so the notification list never overflows. */
+  .nav-panel > .acct { margin: 0; width: 100%; align-self: stretch; justify-content: center; }
+  .nav-panel > .acct .acct-btn:not(.notif-btn) { padding: 8px 10px; }
+  .nav-panel > .acct .acct-name { max-width: 12ch; }
   /* The bell's notification list would anchor to the small bell button and spill
      off the left edge; drop .notif's positioning context so it anchors to the
      panel instead — dropping below the menu, right-aligned and within the