From 27b9219383a570f40f1587055b64a7db28d9e8cf Mon Sep 17 00:00:00 2001 From: Codex Date: Sat, 20 Jun 2026 02:07:24 +0200 Subject: [PATCH] Polish inspector mobile layout --- CHANGELOG.md | 8 ++ .../test_sprint77_inspector_mobile_polish.py | 46 ++++++++++++ docs/CODEX_EXECUTION_LOG.md | 25 +++++++ docs/TODO.md | 1 + frontend/README.md | 2 + .../components/datasets/RasterControls.tsx | 14 ++-- .../components/datasets/VectorControls.tsx | 6 +- frontend/src/styles/app.css | 74 +++++++++++++++++++ 8 files changed, 166 insertions(+), 10 deletions(-) create mode 100644 backend/tests/test_sprint77_inspector_mobile_polish.py diff --git a/CHANGELOG.md b/CHANGELOG.md index 9af01127..c4ea0125 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,14 @@ # Changelog +## Sprint 77 Inspector mobile visual polish (2026-06-20) + +- Added compact inspector action button grids for narrow screens. +- Added mobile-safe wrapping for dataset filenames, checksums, bounds, persisted export paths and loaded feature/job JSON. +- Added structured raster/vector tool panel classes so operation inputs and buttons stay inside the inspector. +- Added static regression coverage for inspector mobile CSS and dataset tool markup contracts. +- No API contracts, migrations, backend behavior, provider fetching or AI model behavior changed. + ## Sprint 76 Export/System mobile visual polish (2026-06-20) - Added scan-friendly Provider Capabilities cards with structured status, authority, geometry, query mode and layer chips. diff --git a/backend/tests/test_sprint77_inspector_mobile_polish.py b/backend/tests/test_sprint77_inspector_mobile_polish.py new file mode 100644 index 00000000..8da3dbbd --- /dev/null +++ b/backend/tests/test_sprint77_inspector_mobile_polish.py @@ -0,0 +1,46 @@ +from pathlib import Path + + +ROOT = Path(__file__).resolve().parents[2] + + +def test_inspector_mobile_density_css_contracts() -> None: + css = (ROOT / "frontend" / "src" / "styles" / "app.css").read_text(encoding="utf-8") + + assert ".inspector-card .button-row" in css + assert ".inspector-card .button-row button" in css + assert ".inspector-field strong" in css + assert ".dataset-detail-panel p" in css + assert ".dataset-detail-panel li" in css + assert ".dataset-detail-panel .job-result" in css + assert ".dataset-tool-panel" in css + assert ".dataset-tool-group" in css + assert ".dataset-tool-group label" in css + assert ".dataset-tool-group input," in css + assert ".dataset-tool-group select" in css + assert ".dataset-tool-group button" in css + assert "overflow-wrap: anywhere;" in css + assert "max-height: 18rem;" in css + + +def test_inspector_components_keep_mobile_tool_markup() -> None: + inspector = (ROOT / "frontend" / "src" / "components" / "inspector" / "WorkbenchInspector.tsx").read_text( + encoding="utf-8" + ) + dataset_detail = (ROOT / "frontend" / "src" / "components" / "datasets" / "DatasetDetailPanel.tsx").read_text( + encoding="utf-8" + ) + raster_controls = (ROOT / "frontend" / "src" / "components" / "datasets" / "RasterControls.tsx").read_text( + encoding="utf-8" + ) + vector_controls = (ROOT / "frontend" / "src" / "components" / "datasets" / "VectorControls.tsx").read_text( + encoding="utf-8" + ) + + assert 'className="workbench-inspector-panel"' in inspector + assert 'className="inspector-action-bar"' in inspector + assert 'className="dataset-detail-panel"' in dataset_detail + assert 'className="dataset-tool-panel raster-tool-panel"' in raster_controls + assert 'className="dataset-tool-group"' in raster_controls + assert 'className="dataset-tool-panel vector-tool-panel"' in vector_controls + assert 'className="dataset-tool-group"' in vector_controls diff --git a/docs/CODEX_EXECUTION_LOG.md b/docs/CODEX_EXECUTION_LOG.md index e6f019c5..d777b190 100644 --- a/docs/CODEX_EXECUTION_LOG.md +++ b/docs/CODEX_EXECUTION_LOG.md @@ -2850,3 +2850,28 @@ Limitations: Next recommended pass: - Continue with right-side inspector mobile polish, especially long dataset/vector/raster metadata and action groups. + +## Sprint 77 Inspector mobile visual polish (2026-06-20) + +Changed: +- Added compact inspector action button grids and mobile-safe wrapping for long inspector values. +- Added scroll/wrap containment for dataset detail text, job JSON and loaded feature metadata. +- Added `dataset-tool-panel` and `dataset-tool-group` classes to raster/vector operation controls. +- Added CSS containment for raster/vector tool labels, inputs, selects and buttons inside the inspector. +- Added `backend/tests/test_sprint77_inspector_mobile_polish.py`. +- Updated `frontend/README.md`, `docs/TODO.md` and `CHANGELOG.md`. + +Tested: +- Red step: `python -m pytest backend/tests/test_sprint77_inspector_mobile_polish.py -q` failed on missing inspector mobile CSS and dataset tool markup contracts. +- `python -m pytest backend/tests/test_sprint77_inspector_mobile_polish.py backend/tests/test_sprint76_export_system_mobile_polish.py backend/tests/test_sprint75_ai_labs_mobile_polish.py backend/tests/test_sprint72_mobile_overflow_hardening.py backend/tests/test_sprint52_workbench_inspector_tabs.py backend/tests/test_sprint30_workbench_components.py backend/tests/test_sprint29_dataset_components.py -q` (`18 passed`) +- `cd frontend && npm run typecheck` +- `cd frontend && npm run build` + +Open: +- Run full readiness, redeploy Tower and verify live runtime smoke after deployment. + +Limitations: +- Frontend presentation polish only; no dataset workflow, raster/vector operation behavior, API, persistence, migration, provider fetching or AI/model changes. + +Next recommended pass: +- Continue with report/export preview readability polish, especially large JSON/HTML handoff artifacts. diff --git a/docs/TODO.md b/docs/TODO.md index 9c877786..cfae260c 100644 --- a/docs/TODO.md +++ b/docs/TODO.md @@ -66,6 +66,7 @@ This file now starts with the current implementation status. Older preparation/b - [x] Add Data/Map mobile visual polish for upload forms, action grids and map toolbar density. - [x] Add AI Labs mobile visual polish for model cards, lab forms and result tables. - [x] Add Export/System mobile visual polish for export actions and provider capability cards. +- [x] Add inspector mobile polish for dataset metadata, raster/vector tools and action groups. ## Sprint 8 status diff --git a/frontend/README.md b/frontend/README.md index 79eab447..62fda5e9 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -10,6 +10,8 @@ AI Labs uses the same mobile-density baseline for Detection and Segmentation mod Exports and System provider capabilities now use compact, mobile-safe cards for handoff actions, artifact filters and provider metadata. Long provider limitations, export ids and artifact paths wrap inside their cards instead of widening the workbench. +The right-side inspector also uses mobile-safe metadata and tool panels. Dataset filenames, checksums, bounds, job JSON, raster/vector operation inputs and inspector action groups wrap or scroll within the inspector instead of widening the workbench. + ## Scope implemented - API client layer (`src/services/api`) - Project and area list/create flows diff --git a/frontend/src/components/datasets/RasterControls.tsx b/frontend/src/components/datasets/RasterControls.tsx index e5e98a58..fc4fb484 100644 --- a/frontend/src/components/datasets/RasterControls.tsx +++ b/frontend/src/components/datasets/RasterControls.tsx @@ -94,7 +94,7 @@ export function RasterControls({ onRunRasterNdbi, }: RasterControlsProps) { return ( -
+

Raster driver: {selectedRasterMetadata?.driver ?? 'n/a'}

Raster size: {selectedRasterMetadata ? `${selectedRasterMetadata.width} x ${selectedRasterMetadata.height}` : 'n/a'}

Raster checksum: {selectedRasterMetadata?.checksum_sha256 ?? 'n/a'}

@@ -132,7 +132,7 @@ export function RasterControls({
) : null} -
+
-
+