From 0028473ec98c9e0334c399e9fcb6720ed80d60b4 Mon Sep 17 00:00:00 2001 From: Alessandro <155005371+3clyp50@users.noreply.github.com> Date: Tue, 23 Jun 2026 14:01:30 +0200 Subject: [PATCH] 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 | 1 + plugins/_browser/webui/browser-panel.html | 17 ++++++++++ tests/test_browser_agent_regressions.py | 11 +++++++ tests/test_file_browser_navigation.py | 4 +++ .../components/modals/file-browser/AGENTS.md | 1 + .../modals/file-browser/file-browser.html | 32 +++++++++++++++---- 6 files changed, 59 insertions(+), 7 deletions(-) diff --git a/plugins/_browser/AGENTS.md b/plugins/_browser/AGENTS.md index cad2960ea..06e3faf89 100644 --- a/plugins/_browser/AGENTS.md +++ b/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. diff --git a/plugins/_browser/webui/browser-panel.html b/plugins/_browser/webui/browser-panel.html index c72112064..be8301d73 100644 --- a/plugins/_browser/webui/browser-panel.html +++ b/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); } diff --git a/tests/test_browser_agent_regressions.py b/tests/test_browser_agent_regressions.py index 19765aa8d..8a8d85f36 100644 --- a/tests/test_browser_agent_regressions.py +++ b/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" diff --git a/tests/test_file_browser_navigation.py b/tests/test_file_browser_navigation.py index 7b6b1a723..e2285e071 100644 --- a/tests/test_file_browser_navigation.py +++ b/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 diff --git a/webui/components/modals/file-browser/AGENTS.md b/webui/components/modals/file-browser/AGENTS.md index 212288525..15f82de4f 100644 --- a/webui/components/modals/file-browser/AGENTS.md +++ b/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 diff --git a/webui/components/modals/file-browser/file-browser.html b/webui/components/modals/file-browser/file-browser.html index 3cb2b0cb2..886cd7f95 100644 --- a/webui/components/modals/file-browser/file-browser.html +++ b/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;