[codex] Fix mobile navbar search overlap

e2e/navbar-search.spec.ts

@@ -51,6 +51,29 @@ async function assertSearchPageNavigation(link: Locator, page: Page) {
   await expect(page).toHaveURL(/\/search$/);
 }
 
+async function expectMobileSearchToLeaveThemeToggleAccessible(page: Page) {
+  const metrics = await page.evaluate(() => {
+    const search = document.querySelector('[data-search-variant="mobile"] [data-search-trigger="page"]');
+    const toggleRoot = document.querySelector('.navbar__items--right [class*="colorModeToggle"]');
+    const toggleButton = toggleRoot?.querySelector('button, .clean-btn') ?? toggleRoot;
+
+    if (!(search instanceof HTMLElement) || !(toggleButton instanceof HTMLElement)) {
+      return null;
+    }
+
+    const searchRect = search.getBoundingClientRect();
+    const toggleRect = toggleButton.getBoundingClientRect();
+
+    return {
+      searchRight: searchRect.right,
+      toggleLeft: toggleRect.left,
+    };
+  });
+
+  expect(metrics).not.toBeNull();
+  expect(metrics!.searchRight).toBeLessThan(metrics!.toggleLeft);
+}
+
 test('desktop navbar search', async ({ page }) => {
   await openAndReload(page, '/introduction', { width: 1280, height: 900 });
 
@@ -59,9 +82,10 @@ test('desktop navbar search', async ({ page }) => {
 });
 
 test('mobile navbar search', async ({ page }) => {
-  await openAndReload(page, '/introduction', { width: 390, height: 844 });
+  await openAndReload(page, '/introduction', { width: 320, height: 844 });
 
   await expectSingleVisibleSearchVariant(page, 'mobile');
+  await expectMobileSearchToLeaveThemeToggleAccessible(page);
   await assertSearchPageNavigation(page.locator('[data-search-variant="mobile"] [data-search-trigger="page"]'), page);
 });
 

src/css/custom.css

@@ -1196,10 +1196,11 @@ kbd.searchHint_iIMx {
     display: none;
   }
 
-  [class*='navbarSearchContainer'] {
-    position: static;
-    transform: none;
-    width: auto;
+  .mwNavbar .navbar__items--right [class*='navbarSearchContainer'] {
+    position: static !important;
+    inset: auto !important;
+    transform: none !important;
+    width: auto !important;
   }
 }
 
@@ -1466,6 +1467,20 @@ html[data-theme='dark'] .mwNavbar .navbar__link--active{
     gap: 0.35rem;
   }
 
+  .mwNavbar .navbar__items--right [class*='navbarSearchContainer']{
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .mwNavbar .navbar__items--right [class*='colorModeToggle']{
+    flex: 0 0 38px;
+    min-width: 38px;
+  }
+
+  .mwNavbar .navbar__items--right [class*='colorModeToggle'] .clean-btn{
+    width: 100%;
+  }
+
   .mwNavbar .navbar__toggle.clean-btn{
     display: inline-flex;
   }