feat: keep the sidebar for groups; search in the nav, the rest in the user menu

Search is an icon in the nav, left of the tray button and the bell, and marks
itself current on its page. Administration, Node, Create group and Android
Sync moved to the user menu, between Settings and the theme, each under the
condition it had in the sidebar. The sidebar keeps Public groups and the
groups.

On a phone, a tablet or the Android application the menu trigger is the
avatar alone (max-width 768px or a coarse pointer); the name is the dropdown's
first line, one line with an ellipsis. Measured: a 20-character handle put the
trigger 159 px off a 320 px screen with search and transfers in the nav, and a
64-character one pushed the dropdown 122 px off the left.

Creating a group is a desktop-application feature by design: a hand-typed
#/create-group no longer opens the form in a browser, and QUICKSTART step 6
now says to use the desktop application instead of the browser.

test_layout_responsive read only the first 768px media block; it reads them
all now.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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;