1 files changed, 32 insertions, 1 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index f6cb57c..b5996d8 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -328,6 +328,7 @@ a:hover { text-decoration: underline; }
   border-radius: 10px;
   box-shadow: var(--shadow-lg);
   min-width: 220px;
+  max-width: calc(100vw - 32px);
   z-index: 120;
   /* The language submenu expands to ten entries inside this dropdown, which
      overruns a short viewport. Clip horizontally as before, scroll vertically
@@ -342,7 +343,14 @@ a:hover { text-decoration: underline; }
   display: flex; align-items: center; gap: 10px;
   padding: 12px 14px 8px;
 }
-.user-menu-uname { font-weight: 600; font-size: 0.9em; color: var(--text); }
+/* One line, whatever the name. Usernames go to 64 characters, and unclipped one
+   stretched the dropdown 122 px off the left of a phone — where, on a phone,
+   this line is now the only place the name is shown. */
+.user-menu-header > div { min-width: 0; }
+.user-menu-uname {
+  font-weight: 600; font-size: 0.9em; color: var(--text);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
 .user-menu-role { font-size: 0.75em; color: var(--text-dim); text-transform: capitalize; }
 
 .user-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }
@@ -2914,6 +2922,20 @@ a.transfer-name {
 
 /* ── Responsive ───────────────────────────────────────────────────────────── */
 
+/* On a phone or a tablet — the Android application included, in either
+   orientation — the user menu is the avatar alone; the name is the dropdown's
+   first line. The nav there holds the hamburger, the wordmark, transfers,
+   search, the bell and the menu: with the name in the trigger, a 20-character
+   handle put the menu 159 px off a 320 px screen. `pointer: coarse` is what
+   catches a phone held sideways, which is wider than the breakpoint. */
+@media (max-width: 768px), (pointer: coarse) {
+  .user-menu-trigger { padding: 3px; }
+  .user-menu-name, .user-menu-caret { display: none; }
+}
+@media (max-width: 520px) {
+  .nav-right { gap: 6px; }
+}
+
 @media (max-width: 768px) {
   .nav-hamburger { display: flex; }
 
@@ -3123,6 +3145,15 @@ a.transfer-name {
   font-size: 1.25rem;
   margin-right: 4px;
 }
+/* Search left the sidebar for the nav, and took its "you are here" with it. */
+.nav-search {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px;
+  border-radius: 6px;
+}
+.nav-search:hover,
+.nav-search[aria-current="page"] { background: rgba(255, 255, 255, 0.1); }
 .notif-badge {
   position: absolute;
   top: -6px;