refine responsive workbench gui

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>

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)); }
+}