From c20e718086072c490f0de4698091cd5883b804f4 Mon Sep 17 00:00:00 2001
From: Jens <jens@localhost>
Date: Fri, 21 Aug 2026 22:35:17 +0200
Subject: [PATCH] refine responsive workbench gui

---
 docs/CODEX_EXECUTION_LOG.md                  | 27 +++++++
 docs/TODO.md                                 |  5 ++
 frontend/src/components/map/MapWorkspace.tsx | 14 +++-
 frontend/src/styles/geointel-system.css      | 77 ++++++++++++++++++++
 4 files changed, 119 insertions(+), 4 deletions(-)

diff --git a/docs/CODEX_EXECUTION_LOG.md b/docs/CODEX_EXECUTION_LOG.md
index 96645a55..dc069660 100644
--- a/docs/CODEX_EXECUTION_LOG.md
+++ b/docs/CODEX_EXECUTION_LOG.md
@@ -12837,3 +12837,30 @@ Open:
   threshold, active weights and production image therefore remain unchanged.
 - The weak fresh-domain scores are retained as a real blocker, not hidden by
   the older exposed Turnhout/Westerlo/Postel diagnostics.
+
+## 2026-08-21 - Full-workbench responsive GUI pass
+
+### Delivered
+
+- Audited the live guest workbench at 1440 x 900 and 390 x 844. The desktop
+  evidence drawer truncated metric labels; the phone layout placed the model
+  picker before the map and made later navigation destinations unreachable.
+- Increased the usable evidence-drawer range and switched compact evidence
+  groups to a two-column container-responsive layout with wrapping labels.
+- Reworked phones into a map-first flow: compact search and period controls,
+  map toolbar with an icon-only clear action, model selection after the map,
+  and a persistent horizontally scrollable bottom navigation rail.
+- Kept dual-display launching desktop-only and made the compact results drawer
+  viewport-fixed above the phone navigation.
+
+### Verification
+
+- Frontend TypeScript check passed.
+- All 54 frontend unit tests passed.
+- Production frontend build passed.
+
+### Remaining limitation
+
+- Browser emulation covers responsive layout and interaction; certification on
+  physical touch hardware and with a screen reader remains a separate human QA
+  activity.
diff --git a/docs/TODO.md b/docs/TODO.md
index ba320630..df77f3c9 100644
--- a/docs/TODO.md
+++ b/docs/TODO.md
@@ -1213,3 +1213,8 @@ This file now starts with the current implementation status. Older preparation/b
   review. Do not copy V72 calibration tiles or use their labels for fitting.
 - [ ] Finalise version-specific PICC/UrbIS semantic harmonisation contracts
   before treating Walloon/Brussels metrics as release-grade ground truth.
+- [x] Complete a responsive GUI audit at desktop, laptop and phone widths;
+  keep the map above model selection on phones, expose all navigation items
+  through a bottom rail and remove clipped result metrics.
+- [ ] Repeat the responsive audit with a physical touch device and screen
+  reader before claiming full mobile accessibility certification.
diff --git a/frontend/src/components/map/MapWorkspace.tsx b/frontend/src/components/map/MapWorkspace.tsx
index 5ef71cd0..859a6f26 100644
--- a/frontend/src/components/map/MapWorkspace.tsx
+++ b/frontend/src/components/map/MapWorkspace.tsx
@@ -2585,7 +2585,7 @@ export function MapWorkspace({
                   onClick={startBboxSelection}
                 >
                   <BoxSelect aria-hidden="true" />
-                  {bboxSelectionMode ? 'Teken op de kaart…' : 'Teken rechthoek'}
+                  <span>{bboxSelectionMode ? 'Teken op de kaart…' : 'Teken rechthoek'}</span>
                 </button>
                 <button
                   className="secondary-action"
@@ -2601,11 +2601,17 @@ export function MapWorkspace({
                   }}
                 >
                   <MapPinned aria-hidden="true" />
-                  Volledig werkgebied
+                  <span>Volledig werkgebied</span>
                 </button>
-                <button className="secondary-action" disabled={!mapSelectionBbox} type="button" onClick={clearAreaSelection}>
+                <button
+                  className="secondary-action"
+                  disabled={!mapSelectionBbox}
+                  type="button"
+                  onClick={clearAreaSelection}
+                  aria-label="Wis selectie"
+                >
                   <Trash2 aria-hidden="true" />
-                  Wis selectie
+                  <span>Wis selectie</span>
                 </button>
               </div>
             </div>
diff --git a/frontend/src/styles/geointel-system.css b/frontend/src/styles/geointel-system.css
index bab4864f..2b6aa764 100644
--- a/frontend/src/styles/geointel-system.css
+++ b/frontend/src/styles/geointel-system.css
@@ -2310,3 +2310,80 @@ button.overview-command-card { cursor: pointer; }
   .geo-theme-panel { max-height: 15rem; }
   .geo-theme-list { max-height: 7.2rem; min-height: 4.75rem; }
 }
+
+/* Final responsive workbench refinement. */
+.geo-results-panel { container-type: inline-size; width: clamp(24rem, 26vw, 32rem); }
+.geo-results-toggle-open { right: clamp(24rem, 26vw, 32rem); }
+.geo-primary-metrics > div, .geo-image-quality-metrics > div { min-width: 0; }
+.geo-primary-metrics :where(span, small):first-child, .geo-image-quality-metrics span { overflow-wrap: anywhere; line-height: 1.25; }
+.geo-primary-metrics :where(strong, b), .geo-image-quality-metrics strong { overflow: visible; white-space: normal; text-overflow: clip; }
+
+@container (max-width: 29rem) {
+  .geo-primary-metrics, .geo-image-quality-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .geo-primary-metrics > :last-child:nth-child(odd), .geo-image-quality-metrics > :last-child:nth-child(odd) { grid-column: 1 / -1; }
+}
+
+.geo-theme-option:disabled { min-height: 2.65rem; opacity: 0.62; }
+.geo-theme-option:disabled small { display: none; }
+
+@media (max-width: 1240px) {
+  .geo-results-panel { width: min(30rem, calc(100% - 3rem)); }
+  .geo-results-toggle-open { right: min(30rem, calc(100% - 3rem)); }
+}
+
+@media (max-width: 600px) {
+  .workbench-layout { display: block; min-height: 100dvh; }
+  .workbench-sidebar {
+    position: fixed; z-index: 120; right: 0; bottom: 0; left: 0; width: 100%;
+    min-height: 4.15rem; max-height: 4.15rem; border-top: 1px solid rgba(153, 218, 202, 0.22);
+    padding: 0.3rem 0.45rem max(0.3rem, env(safe-area-inset-bottom));
+    box-shadow: 0 -8px 24px rgba(3, 40, 35, 0.18);
+  }
+  .workbench-sidebar .brand-block, .workbench-sidebar .itworx-signature { display: none; }
+  .workbench-sidebar nav {
+    display: flex; width: 100%; gap: 0.22rem; overflow-x: auto; overflow-y: hidden;
+    scroll-snap-type: x proximity; scrollbar-width: none;
+  }
+  .workbench-sidebar nav::-webkit-scrollbar { display: none; }
+  .workbench-sidebar .nav-item {
+    flex: 0 0 4.45rem; min-width: 4.45rem; min-height: 3.45rem; padding: 0.32rem 0.42rem;
+    scroll-snap-align: start;
+  }
+  .workbench-stage { min-height: 100dvh; padding-bottom: 4.15rem; }
+  .secondary-display-launch { display: none; }
+  .guest-mode-banner { min-height: 2.4rem; padding: 0.35rem 0.7rem; }
+  .guest-mode-banner strong { font-size: 0.7rem; }
+  .geo-explorer-header {
+    display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; padding: 0.5rem 0.7rem;
+  }
+  .geo-explorer-header .eyebrow, .geo-explorer-header > div:first-child > p:last-child { display: none; }
+  .geo-explorer-header h2 { font-size: 1rem; }
+  .geo-explorer-header-tools, .geo-analysis-mode { width: 100%; }
+  .municipality-search { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0.45rem 0.7rem; }
+  .municipality-search-copy, .municipality-search-status { display: none; }
+  .municipality-search input { min-height: 2.65rem; }
+  .geo-explorer-layout, .workbench-shell-guest .geo-explorer-layout {
+    grid-template-areas: 'map' 'themes'; grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(26rem, 62dvh) minmax(18rem, auto); height: auto; overflow: visible;
+  }
+  .geo-map-stage { grid-area: map; min-height: 26rem; }
+  .geo-theme-panel {
+    grid-area: themes; max-height: 25rem; border-top: 1px solid var(--gi-line); border-bottom: 0;
+  }
+  .geo-theme-list { max-height: 13rem; min-height: 7rem; }
+  .geo-loaded-scope, .geo-source-summary { display: none; }
+  .geo-map-toolbar { top: 0.5rem; right: 0.5rem; left: 0.5rem; }
+  .geo-map-actions {
+    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 2.35rem;
+    width: 100%; overflow: visible;
+  }
+  .geo-map-actions button { min-width: 0; justify-content: center; padding-inline: 0.45rem; }
+  .geo-map-actions button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .geo-map-actions button:last-child span { display: none; }
+  .geo-results-panel {
+    position: fixed; z-index: 130; top: 0; right: 0; bottom: 4.15rem;
+    width: min(31rem, calc(100% - 2.75rem)); height: auto; max-height: none;
+  }
+  .geo-results-toggle { position: fixed; z-index: 131; }
+  .geo-results-toggle-open { right: min(31rem, calc(100% - 2.75rem)); }
+}