Polish inspector mobile layout

frontend/README.md

@@ -10,6 +10,8 @@ AI Labs uses the same mobile-density baseline for Detection and Segmentation mod
 
 Exports and System provider capabilities now use compact, mobile-safe cards for handoff actions, artifact filters and provider metadata. Long provider limitations, export ids and artifact paths wrap inside their cards instead of widening the workbench.
 
+The right-side inspector also uses mobile-safe metadata and tool panels. Dataset filenames, checksums, bounds, job JSON, raster/vector operation inputs and inspector action groups wrap or scroll within the inspector instead of widening the workbench.
+
 ## Scope implemented
 - API client layer (`src/services/api`)
 - Project and area list/create flows

frontend/src/components/datasets/RasterControls.tsx

@@ -94,7 +94,7 @@ export function RasterControls({
   onRunRasterNdbi,
 }: RasterControlsProps) {
   return (
-    <div>
+    <div className="dataset-tool-panel raster-tool-panel">
       <p>Raster driver: {selectedRasterMetadata?.driver ?? 'n/a'}</p>
       <p>Raster size: {selectedRasterMetadata ? `${selectedRasterMetadata.width} x ${selectedRasterMetadata.height}` : 'n/a'}</p>
       <p>Raster checksum: {selectedRasterMetadata?.checksum_sha256 ?? 'n/a'}</p>
@@ -132,7 +132,7 @@ export function RasterControls({
           </ul>
         </div>
       ) : null}
-      <div>
+      <div className="dataset-tool-group">
         <label>
           Reproject CRS
           <input
@@ -153,7 +153,7 @@ export function RasterControls({
           Reproject raster
         </button>
       </div>
-      <div>
+      <div className="dataset-tool-group">
         <label>
           Clip area
           <select value={selectedClipAreaId} onChange={(event) => onSetSelectedClipAreaId(event.target.value)}>
@@ -169,7 +169,7 @@ export function RasterControls({
         </button>
         {areas.length === 0 ? <p className="error">Create an area before raster clipping.</p> : null}
       </div>
-      <div>
+      <div className="dataset-tool-group">
         <label>
           Tile size
           <input
@@ -208,7 +208,7 @@ export function RasterControls({
       <h4>Spectral indices</h4>
       <div>
         <p>Use available band indexes from the raster file (1-based).</p>
-        <div>
+        <div className="dataset-tool-group">
           <p>NDVI</p>
           <label>
             Nir band
@@ -222,7 +222,7 @@ export function RasterControls({
             Compute NDVI
           </button>
         </div>
-        <div>
+        <div className="dataset-tool-group">
           <p>NDWI</p>
           <label>
             Nir band
@@ -236,7 +236,7 @@ export function RasterControls({
             Compute NDWI
           </button>
         </div>
-        <div>
+        <div className="dataset-tool-group">
           <p>NDBI</p>
           <label>
             Swir band

frontend/src/components/datasets/VectorControls.tsx

@@ -24,9 +24,9 @@ export function VectorControls({
   onRunVectorIntersect,
 }: VectorControlsProps) {
   return (
-    <div>
+    <div className="dataset-tool-panel vector-tool-panel">
       <h3>Vector operations</h3>
-      <div>
+      <div className="dataset-tool-group">
         <label>
           Clip area
           <select value={selectedClipAreaId} onChange={(event) => onSetSelectedClipAreaId(event.target.value)}>
@@ -44,7 +44,7 @@ export function VectorControls({
       <button type="button" onClick={onRunVectorBuffer}>
         Run buffer (25m)
       </button>
-      <div>
+      <div className="dataset-tool-group">
         <label>
           Intersect target
           <select value={selectedIntersectTargetId} onChange={(event) => onSetSelectedIntersectTargetId(event.target.value)}>

frontend/src/styles/app.css

@@ -2001,12 +2001,27 @@ button.entity-card {
 }
 
 .inspector-field strong {
+  min-width: 0;
   overflow: hidden;
   font-size: 0.88rem;
   line-height: 1.28;
+  overflow-wrap: anywhere;
   text-overflow: ellipsis;
 }
 
+.inspector-card .button-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
+  gap: 0.42rem;
+}
+
+.inspector-card .button-row button {
+  width: 100%;
+  min-width: 0;
+  min-height: 2.2rem;
+  margin-top: 0;
+}
+
 .workbench-inspector-panel .dataset-detail-panel {
   border: 0;
   padding: 0;
@@ -2020,6 +2035,51 @@ button.entity-card {
   gap: 0.55rem;
 }
 
+.dataset-detail-panel p,
+.dataset-detail-panel li {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.dataset-detail-panel .job-result {
+  max-height: 18rem;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.dataset-tool-panel {
+  display: grid;
+  min-width: 0;
+  gap: 0.62rem;
+}
+
+.dataset-tool-group {
+  display: grid;
+  min-width: 0;
+  gap: 0.5rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.62rem;
+  background: #ffffff;
+}
+
+.dataset-tool-group label {
+  min-width: 0;
+}
+
+.dataset-tool-group input,
+.dataset-tool-group select {
+  width: 100%;
+  min-width: 0;
+}
+
+.dataset-tool-group button {
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+}
+
 @media (max-width: 1360px) {
   .workbench-layout {
     grid-template-columns: 12rem minmax(0, 1fr);
@@ -2151,6 +2211,20 @@ button.entity-card {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .inspector-card,
+  .dataset-tool-group {
+    padding: 0.58rem;
+  }
+
+  .inspector-action-bar,
+  .inspector-card .button-row {
+    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
+  }
+
+  .dataset-tool-group button {
+    width: 100%;
+  }
+
   .workbench-sidebar nav {
     display: flex;
     gap: 0.5rem;