diff --git a/crates/lanspread-tauri-deno-ts/src/components/topbar/TopBar.tsx b/crates/lanspread-tauri-deno-ts/src/components/topbar/TopBar.tsx
index 7b8af6c..a41d1ed 100644
--- a/crates/lanspread-tauri-deno-ts/src/components/topbar/TopBar.tsx
+++ b/crates/lanspread-tauri-deno-ts/src/components/topbar/TopBar.tsx
@@ -36,11 +36,21 @@ export const TopBar = ({
     kebabItems,
 }: Props) => (
     <header className="topbar">
-        <Brand peerCount={peerCount} />
-        <SegmentedFilters value={filter} onChange={setFilter} counts={counts} />
-        <SearchField value={query} onChange={setQuery} />
-        <SortMenu value={sort} onChange={setSort} />
-        <DirectoryButton path={gameDir} onClick={onPickDirectory} />
-        <KebabMenu items={kebabItems} />
+        <div className="topbar-left">
+            <Brand peerCount={peerCount} />
+            <div className="topbar-left-trail">
+                <SegmentedFilters value={filter} onChange={setFilter} counts={counts} />
+            </div>
+        </div>
+        <div className="topbar-center">
+            <SearchField value={query} onChange={setQuery} />
+        </div>
+        <div className="topbar-right">
+            <div className="topbar-right-lead">
+                <SortMenu value={sort} onChange={setSort} />
+            </div>
+            <DirectoryButton path={gameDir} onClick={onPickDirectory} />
+            <KebabMenu items={kebabItems} />
+        </div>
     </header>
 );
diff --git a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
index 1059279..616ef49 100644
--- a/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
+++ b/crates/lanspread-tauri-deno-ts/src/styles/launcher.css
@@ -6,6 +6,8 @@
   flex-direction: column;
   background: var(--bg-0);
   color: var(--t-1);
+  container-type: inline-size;
+  container-name: launcher;
   overflow: hidden;
   position: relative;
   isolation: isolate;
@@ -56,7 +58,7 @@
   }
 }
 
-/* Top bar */
+/* Top bar — three visual zones with search at the geometric center */
 .topbar {
   position: relative;
   z-index: 10;
@@ -64,12 +66,69 @@
   -webkit-backdrop-filter: blur(20px) saturate(140%);
   backdrop-filter: blur(20px) saturate(140%);
   border-bottom: 1px solid var(--bd-1);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  column-gap: 16px;
+  padding: 14px 24px;
+  min-height: 64px;
+}
+.topbar-left {
   display: flex;
   align-items: center;
-  gap: 18px;
-  padding: 14px 24px;
-  flex-wrap: nowrap;
-  min-height: 64px;
+  justify-content: space-between;
+  gap: 16px;
+  min-width: 0;
+}
+.topbar-left-trail {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+.topbar-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+}
+.topbar-center .search {
+  flex: 0 1 360px;
+  min-width: 0;
+}
+.topbar-right {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+.topbar-right-lead {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+/* Below ~1100px of launcher width the geometric centering stops reading —
+   collapse the three zones into a single left-to-right flowing row. */
+@container launcher (max-width: 1100px) {
+  .topbar {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 16px;
+  }
+  .topbar-left,
+  .topbar-center,
+  .topbar-right {
+    justify-content: flex-start;
+    flex: 0 0 auto;
+    gap: 12px;
+  }
+  .topbar-center {
+    flex: 1 1 200px;
+  }
+  .topbar-center .search {
+    flex: 1 1 auto;
+  }
 }
 
 /* Brand */