fix(frontend): fit the top bar on phone-width screens

Below 640px the search shrinks, the account switcher shows only its icon, and the connection indicator collapses to its status dot with the label kept for screen readers.
2026-10-23 12:00:10 -04:00
parent 9f38313e59
commit f956d977ca
1 changed files with 41 additions and 0 deletions
@@ -779,6 +779,47 @@ pre,
    position: relative;
 }

+@media (max-width: 640px) {
+    .topbar {
+        gap: 8px;
+        padding: 0 10px;
+    }
+
+    .topbar .search {
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+
+    .topbar .search input {
+        padding-right: 8px;
+    }
+
+    .topbar .kbd,
+    .topbar .account-meta,
+    .topbar .connection-target {
+        display: none;
+    }
+
+    .topbar .connection-state {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+    }
+
+    .topbar .connection {
+        flex: 0 0 auto;
+        padding: 8px;
+    }
+
+    .topbar .account-trigger {
+        gap: 4px;
+        padding: 0 6px;
+    }
+}
+
 .topbar-status:empty + .account-switcher {
    margin-left: auto;
 }