From b086f45511f8a241bb09bc53fa37bf439445d273 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Tue, 3 Nov 2026 08:30:10 +0100
Subject: [PATCH] fix: give the Mountain View search field the free width and
 keep it clear of the bell at large text

---
 app/globals.css                  | 16 ++++++++++++++++
 components/layout/mv-top-bar.tsx |  6 ++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index c8eccab2b..4a0ca755d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1165,6 +1165,22 @@ optgroup {
   inset-inline-end: 3.25rem;
 }
 
+/* Large text in a narrow window leaves the field little width, less than these
+   paddings add up to: the input then stuck out under the bell, with the filter
+   button on top of the magnifier. Here the text gets what the magnifier had. */
+[data-interface-layout="mountain-view"] .mv-topbar-search {
+  container-type: inline-size;
+}
+@container (max-width: 16rem) {
+  [data-interface-layout="mountain-view"] .mv-topbar input[data-search-input] {
+    padding-inline-start: 0.75rem;
+    padding-inline-end: 2.75rem;
+  }
+  [data-interface-layout="mountain-view"] .mv-topbar-search > div > form > div > svg {
+    display: none;
+  }
+}
+
 /* The magnifier sits on the field's baseline grid, one 48px hit area in. */
 [data-interface-layout="mountain-view"] .mv-topbar-search > div > form > div > svg {
   inset-inline-start: 1rem;
diff --git a/components/layout/mv-top-bar.tsx b/components/layout/mv-top-bar.tsx
index 95448e23a..62e84ab8f 100644
--- a/components/layout/mv-top-bar.tsx
+++ b/components/layout/mv-top-bar.tsx
@@ -222,9 +222,11 @@ export function MvTopBar({
         </Link>
       </div>
 
-      {/* Search: left-anchored and capped, not centred */}
+      {/* Search: left-anchored and capped, not centred. It takes the free width
+          before the spacer gets any; shared equally, it stayed half as wide as
+          it could be, which at large text left no room for its own icons. */}
       {search && (
-        <div className="mv-topbar-search relative flex items-center gap-1 flex-1 min-w-0 max-w-[720px]">
+        <div className="mv-topbar-search relative flex items-center gap-1 flex-1 grow-[9999] min-w-0 max-w-[720px]">
           <SearchBox
             value={search.query}
             onChange={search.onQueryChange}