From ca4d8035a903cb7d2e623889770e0fecea47705e Mon Sep 17 00:00:00 2001
From: Emi Griffith <me@emigriffith.dev>
Date: Thu, 16 Jul 2026 08:45:43 -0700
Subject: [PATCH] Compact account chip in mobile nav dropdown (#123)

The account button in the hamburger dropdown spanned the full panel width,
so a signed-in user's email rendered as a large centered bar dominating the
menu. Make it a compact chip that hugs its label and centers beside the bell
instead: drop the full-width/flex rules, tighten the button padding, and cut
the name truncation from 16ch to 12ch. The 40px min-height stays for the tap
target.
---
 static/style.css | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

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