Polish workbench visual shell

frontend/src/components/detection/DetectionLab.tsx

@@ -85,7 +85,7 @@ export function DetectionLab({
   onRunQa,
 }: DetectionLabProps): JSX.Element {
   return (
-    <section>
+    <section className="workspace-panel">
       <div className="panel-title-row">
         <div>
           <p className="eyebrow">Object detection</p>
@@ -166,7 +166,7 @@ export function DetectionLab({
       </div>
       {detectionRunError ? <p className="error">{detectionRunError}</p> : null}
       {detectionRunResult ? (
-        <div>
+        <div className="result-summary-card">
           <p>Status: {detectionRunResult.status}</p>
           <p>Message: {detectionRunResult.message}</p>
           <p>Analysis run: {detectionRunResult.analysis_run_id}</p>
@@ -221,26 +221,28 @@ export function DetectionLab({
         {loadingDetectionResults ? <p>Loading detection results...</p> : null}
         <p>Detections loaded: {detectionItems.length}</p>
         {detectionItems.length > 0 ? (
-          <table>
-            <thead>
-              <tr>
-                <th>Class</th>
-                <th>Confidence</th>
-                <th>Model</th>
-                <th>Source tile</th>
-              </tr>
-            </thead>
-            <tbody>
-              {detectionItems.map((detection) => (
-                <tr key={detection.id}>
-                  <td>{detection.class_name}</td>
-                  <td>{detection.confidence.toFixed(2)}</td>
-                  <td>{detection.model_name}</td>
-                  <td>{detection.source_tile_path || 'n/a'}</td>
+          <div className="table-scroll">
+            <table>
+              <thead>
+                <tr>
+                  <th>Class</th>
+                  <th>Confidence</th>
+                  <th>Model</th>
+                  <th>Source tile</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody>
+                {detectionItems.map((detection) => (
+                  <tr key={detection.id}>
+                    <td>{detection.class_name}</td>
+                    <td>{detection.confidence.toFixed(2)}</td>
+                    <td>{detection.model_name}</td>
+                    <td>{detection.source_tile_path || 'n/a'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         ) : null}
       </div>
       <div className="lab-block">
@@ -261,7 +263,7 @@ export function DetectionLab({
         </button>
         {detectionQaError ? <p className="error">{detectionQaError}</p> : null}
         {detectionQaResult ? (
-          <div>
+          <div className="result-summary-card">
             <p>Status: {detectionQaResult.status}</p>
             <p>Quality check: {detectionQaResult.quality_check_id}</p>
             <p>Precision: {detectionQaResult.precision?.toFixed(3) ?? 'n/a'}</p>