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;