Polish workbench workspace usability

frontend/src/components/map/MapWorkspace.tsx

@@ -44,11 +44,17 @@ export function MapWorkspace({
 }: MapWorkspaceProps): JSX.Element {
   return (
     <section data-testid="map-workspace">
-      <h2>Map workspace</h2>
-      <p>{mapLayerLabel}</p>
-      <div className="map-controls">
+      <div className="panel-title-row">
+        <div>
+          <p className="eyebrow">Spatial review</p>
+          <h2>Map workspace</h2>
+        </div>
+        <span className="count-pill">{mapFeatureCollection ? `${mapFeatureCount} features` : 'no layer'}</span>
+      </div>
+
+      <div className="map-toolbar">
         <label>
-          Selected area
+          Area
           <select
             value={selectedMapAreaId}
             onChange={(event) => onSelectMapArea(event.target.value)}
@@ -63,19 +69,19 @@ export function MapWorkspace({
             ))}
           </select>
         </label>
-        <label className="checkbox-row">
-          <input
-            checked={areaLayerVisible}
-            disabled={!areaFeatureCollection}
-            type="checkbox"
-            onChange={(event) => onSetAreaLayerVisible(event.target.checked)}
-            data-testid="map-area-visible"
-          />
-          Area visible
-        </label>
-        <label>
-          Area opacity
+        <div className="layer-control-card">
+          <label className="checkbox-row">
+            <input
+              checked={areaLayerVisible}
+              disabled={!areaFeatureCollection}
+              type="checkbox"
+              onChange={(event) => onSetAreaLayerVisible(event.target.checked)}
+              data-testid="map-area-visible"
+            />
+            AOI
+          </label>
           <input
+            aria-label="Area opacity"
             disabled={!areaFeatureCollection}
             max="0.7"
             min="0.05"
@@ -85,20 +91,20 @@ export function MapWorkspace({
             onChange={(event) => onSetAreaLayerOpacity(Number(event.target.value))}
             data-testid="map-area-opacity"
           />
-        </label>
-        <label className="checkbox-row">
-          <input
-            checked={mapLayerVisible}
-            disabled={!mapFeatureCollection}
-            type="checkbox"
-            onChange={(event) => onSetMapLayerVisible(event.target.checked)}
-            data-testid="map-layer-visible"
-          />
-          Layer visible
-        </label>
-        <label>
-          Layer opacity
+        </div>
+        <div className="layer-control-card">
+          <label className="checkbox-row">
+            <input
+              checked={mapLayerVisible}
+              disabled={!mapFeatureCollection}
+              type="checkbox"
+              onChange={(event) => onSetMapLayerVisible(event.target.checked)}
+              data-testid="map-layer-visible"
+            />
+            Active layer
+          </label>
           <input
+            aria-label="Layer opacity"
             disabled={!mapFeatureCollection}
             max="1"
             min="0.05"
@@ -108,10 +114,11 @@ export function MapWorkspace({
             onChange={(event) => onSetMapLayerOpacity(Number(event.target.value))}
             data-testid="map-layer-opacity"
           />
-        </label>
+        </div>
         <div className="map-status">
-          {areaFeatureCollection ? `${areaFeatureCount} area loaded` : 'No area loaded'} -{' '}
-          {mapFeatureCollection ? `${mapFeatureCount} features loaded` : 'No vector layer loaded'}
+          <strong>{mapLayerLabel}</strong>
+          <span>{areaFeatureCollection ? `${areaFeatureCount} AOI loaded` : 'No AOI loaded'}</span>
+          <span>{mapFeatureCollection ? `${mapFeatureCount} features loaded` : 'No vector/result layer loaded'}</span>
         </div>
       </div>
       <GeoMap
@@ -124,10 +131,12 @@ export function MapWorkspace({
         onFeatureSelect={onSelectMapFeature}
       />
       <div className="feature-inspector">
-        <h3>Feature inspector</h3>
+        <div className="panel-title-row">
+          <h3>Feature inspector</h3>
+          <span className="count-pill">{selectedMapFeature?.geometry?.type ?? 'none'}</span>
+        </div>
         {selectedMapFeature ? (
           <>
-            <p>Geometry: {selectedMapFeature.geometry?.type ?? 'n/a'}</p>
             <pre className="job-result">{JSON.stringify(selectedMapFeature.properties ?? {}, null, 2)}</pre>
           </>
         ) : (