fix: stabilize topbar layout

src/web/index.css

@@ -12694,18 +12694,23 @@ textarea:focus {
 }
 
 .topbar {
+  display: grid;
+  grid-template-columns: minmax(166px, auto) minmax(260px, 430px) minmax(360px, 1fr);
+  align-items: center;
   border-bottom-color: color-mix(in srgb, var(--console-line) 86%, transparent);
   background:
     linear-gradient(180deg, color-mix(in srgb, var(--console-panel-solid) 94%, transparent), color-mix(in srgb, var(--console-panel-solid) 80%, transparent));
 }
 
 .topbar-logo {
-  min-width: 188px;
+  min-width: 0;
   padding-right: 14px;
   border-right: 1px solid var(--console-line);
 }
 
 .topbar-nav {
+  width: min(430px, 100%);
+  justify-self: start;
   max-width: 430px;
   padding: 3px;
   border-radius: 999px;
@@ -12730,6 +12735,8 @@ textarea:focus {
 
 .topbar-right {
   min-width: 0;
+  justify-content: flex-end;
+  overflow: visible;
 }
 
 .topbar-user-trigger {
@@ -12888,8 +12895,15 @@ textarea:focus {
 }
 
 @media (max-width: 1180px) {
+  .topbar {
+    grid-template-columns: minmax(126px, auto) minmax(230px, 360px) minmax(248px, 1fr);
+    gap: 10px;
+    padding-inline: 16px;
+  }
+
   .topbar-logo {
     min-width: auto;
+    padding-right: 0;
     border-right: 0;
   }
 
@@ -12898,9 +12912,8 @@ textarea:focus {
   }
 
   .topbar-nav {
-    border-color: transparent;
-    background: transparent;
-    max-width: none;
+    width: min(360px, 100%);
+    max-width: 360px;
   }
 
   .topbar-nav a,
@@ -12914,6 +12927,18 @@ textarea:focus {
     padding-right: 8px;
   }
 
+  .topbar-search-trigger {
+    min-width: 42px;
+    width: 42px;
+    padding-inline: 0;
+    justify-content: center;
+  }
+
+  .topbar-search-trigger .topbar-search-label,
+  .topbar-search-trigger .topbar-search-kbd {
+    display: none;
+  }
+
   .topbar-user-copy {
     display: none;
   }
@@ -12950,6 +12975,7 @@ textarea:focus {
   }
 
   .topbar {
+    display: flex;
     padding-inline: 12px;
     gap: 8px;
   }