Polish mobile browser affordances

Keep the File Browser path and search affordances on compact mobile rows, with create buttons sharing the search row and the Up control sharing the path row.

Give the Web Browser mobile toolbar a full-width address row by moving navigation controls above it, and add regression/DOX coverage for the layout contracts.

plugins/_browser/AGENTS.md

@@ -19,6 +19,7 @@
 - Preserve Playwright lifecycle cleanup and WebSocket viewer compatibility across regular host browsers and Electron WebContentsView embedding.
 - Keep the WebUI Browser inside its own modal/canvas affordance; do not replace it with page-level navigation.
 - Default the visible WebUI Browser to live CDP screencast for responsiveness. Keep lightweight CDP/DOM state snapshots as the fallback transport.
+- Keep narrow WebUI Browser controls usable by placing navigation buttons above a full-width address bar.
 - Prefer DOM/CDP browser actions with refs, selectors, frame-chain refs, and screenshots over viewport coordinate input. Coordinates remain a visual fallback.
 - Do not hardcode user-specific browser paths or secrets.
 

plugins/_browser/webui/browser-panel.html

@@ -1278,6 +1278,23 @@
     }
 
     @container (max-width: 460px) {
+      .browser-toolbar {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas:
+          "nav"
+          "address";
+        align-items: stretch;
+        gap: 7px;
+      }
+
+      .browser-navigation {
+        justify-content: flex-start;
+      }
+
+      .browser-address-form {
+        width: 100%;
+      }
+
       .browser-meta-top {
         grid-template-columns: minmax(0, 1fr);
       }

tests/test_browser_agent_regressions.py

@@ -1354,6 +1354,17 @@ def test_browser_panel_exposes_agent_friendly_address_input():
     assert 'class="browser-address" aria-label="Browser address" name="browser_address"' in panel
 
 
+def test_browser_panel_gives_address_bar_full_mobile_row():
+    panel = (
+        PROJECT_ROOT / "plugins" / "_browser" / "webui" / "browser-panel.html"
+    ).read_text(encoding="utf-8")
+
+    assert "@container (max-width: 460px)" in panel
+    assert ".browser-toolbar {\n        grid-template-columns: minmax(0, 1fr);" in panel
+    assert '          "nav"\n          "address";' in panel
+    assert ".browser-address-form {\n        width: 100%;" in panel
+
+
 def test_browser_runtime_requires_current_content_helper_for_modifier_clicks():
     runtime = (
         PROJECT_ROOT / "plugins" / "_browser" / "helpers" / "runtime.py"

tests/test_file_browser_navigation.py

@@ -74,6 +74,10 @@ def test_file_browser_compact_controls_and_narrow_layout_contract() -> None:
     assert ".btn-new-item" in html
     assert "width: 2.8rem;" in html
     assert "height: 2.8rem;" in html
+    assert ".path-navigator {\n      align-items: center;\n      flex-direction: row;" in html
+    assert ".file-browser-toolbar {\n      align-items: center;\n      flex-direction: row;" in html
+    assert ".file-search-shell {\n      flex: 1 1 auto;\n      min-width: 0;\n      width: auto;" in html
+    assert ".path-navigator .nav-button-label {\n        display: none;" in html
 
     assert "container: file-browser / inline-size;" in html
     assert "@container file-browser (max-width: 620px)" in html

webui/components/modals/file-browser/AGENTS.md

@@ -19,6 +19,7 @@
 - Empty mounted startup states must self-heal to the `$WORK_DIR` default instead of rendering a blank path and empty list.
 - Keep the file list readable in narrow canvas/modal containers by hiding the Modified date column before sacrificing the Name or Size columns.
 - Keep New file and New folder controls icon-only across canvas and modal modes while preserving accessible labels.
+- Keep narrow mobile controls compact: Up shares the path row, and New file/New folder share the search row.
 - Preserve surface actions that route supported files to Browser, Desktop, or Editor.
 
 ## Work Guidance

webui/components/modals/file-browser/file-browser.html

@@ -754,7 +754,7 @@
     gap: 0.5em;
     }
     .new-item-buttons button {
-    margin-left: 0.5em;
+    margin-left: 0;
     }
 
     .file-status-bar {
@@ -902,20 +902,31 @@
     /* Responsive Design */
     @media (max-width: 768px) {
     .path-navigator {
-      align-items: stretch;
-      flex-direction: column;
+      align-items: center;
+      flex-direction: row;
       gap: 0.5rem;
     }
     .path-navigator .back-button {
-      align-self: flex-start;
+      align-self: stretch;
     }
     .file-browser-toolbar {
-      align-items: stretch;
-      flex-direction: column;
+      align-items: center;
+      flex-direction: row;
+      gap: 0.5rem;
     }
     .file-search-shell {
+      flex: 1 1 auto;
       min-width: 0;
-      width: 100%;
+      width: auto;
+    }
+    .new-item-buttons {
+      flex: 0 0 auto;
+      gap: 0.4rem;
+    }
+    .btn-new-item {
+      width: 2.5rem;
+      min-width: 2.5rem;
+      height: 2.5rem;
     }
     .file-header {
       grid-template-columns: 2.25rem minmax(0, 1fr) minmax(5rem, 0.52fr) 7.5rem;
@@ -929,6 +940,13 @@
     }
     }
     @media (max-width: 540px) {
+    .path-navigator .back-button {
+        min-width: 2.45rem;
+        padding-inline: 0.5rem;
+    }
+    .path-navigator .nav-button-label {
+        display: none;
+    }
     .file-header,
     .file-item {
         grid-template-columns: 2.25rem minmax(0, 1fr) minmax(4.25rem, max-content) 5.25rem;