From f956d977ca5db6920e75ab0db73153154074bf87 Mon Sep 17 00:00:00 2001
From: Zakaria <zbenmo1@wgu.edu>
Date: Fri, 23 Oct 2026 12:00:10 -0400
Subject: [PATCH] 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.
---
 packages/frontend/src/index.css | 41 +++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index db17acb..d54042d 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -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;
 }