Polish workbench visual shell

frontend/src/components/segmentation/SegmentationLab.tsx

@@ -85,7 +85,7 @@ export function SegmentationLab({
   onRunQa,
 }: SegmentationLabProps): JSX.Element {
   return (
-    <section>
+    <section className="workspace-panel">
       <div className="panel-title-row">
         <div>
           <p className="eyebrow">Polygon segmentation</p>
@@ -163,7 +163,7 @@ export function SegmentationLab({
       ) : null}
       {segmentationRunError ? <p className="error">{segmentationRunError}</p> : null}
       {segmentationRunResult ? (
-        <div>
+        <div className="result-summary-card">
           <p>Status: {segmentationRunResult.status}</p>
           <p>Message: {segmentationRunResult.message}</p>
           <p>Analysis run: {segmentationRunResult.analysis_run_id}</p>
@@ -218,30 +218,32 @@ export function SegmentationLab({
         {loadingSegmentationResults ? <p>Loading segmentation results...</p> : null}
         <p>Segmentations loaded: {segmentationItems.length}</p>
         {segmentationItems.length > 0 ? (
-          <table>
-            <thead>
-              <tr>
-                <th>Class</th>
-                <th>Confidence</th>
-                <th>Area m2</th>
-                <th>Model</th>
-                <th>Tile</th>
-                <th>Mask path</th>
-              </tr>
-            </thead>
-            <tbody>
-              {segmentationItems.map((segmentation) => (
-                <tr key={segmentation.id}>
-                  <td>{segmentation.class_name}</td>
-                  <td>{segmentation.confidence?.toFixed(2) ?? 'n/a'}</td>
-                  <td>{segmentation.area_m2?.toFixed(2) ?? 'n/a'}</td>
-                  <td>{segmentation.model_name}</td>
-                  <td>{segmentation.source_tile_path || (segmentation.tile_index ?? 'n/a')}</td>
-                  <td>{segmentation.mask_path || 'n/a'}</td>
+          <div className="table-scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th>Class</th>
+                  <th>Confidence</th>
+                  <th>Area m2</th>
+                  <th>Model</th>
+                  <th>Tile</th>
+                  <th>Mask path</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {segmentationItems.map((segmentation) => (
+                  <tr key={segmentation.id}>
+                    <td>{segmentation.class_name}</td>
+                    <td>{segmentation.confidence?.toFixed(2) ?? 'n/a'}</td>
+                    <td>{segmentation.area_m2?.toFixed(2) ?? 'n/a'}</td>
+                    <td>{segmentation.model_name}</td>
+                    <td>{segmentation.source_tile_path || (segmentation.tile_index ?? 'n/a')}</td>
+                    <td>{segmentation.mask_path || 'n/a'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         ) : null}
       </div>
       <div className="lab-block">
@@ -262,7 +264,7 @@ export function SegmentationLab({
         </button>
         {segmentationQaError ? <p className="error">{segmentationQaError}</p> : null}
         {segmentationQaResult ? (
-          <div>
+          <div className="result-summary-card">
             <p>Status: {segmentationQaResult.status}</p>
             <p>Quality check: {segmentationQaResult.quality_check_id}</p>
             <p>Precision: {segmentationQaResult.precision?.toFixed(3) ?? 'n/a'}</p>