Polish operation form readability

frontend/src/components/datasets/VectorControls.tsx

@@ -27,38 +27,57 @@ export function VectorControls({
     <div className="dataset-tool-panel vector-tool-panel">
       <h3>Vector operations</h3>
       <div className="dataset-tool-group">
-        <label>
-          Clip area
-          <select value={selectedClipAreaId} onChange={(event) => onSetSelectedClipAreaId(event.target.value)}>
-            {areas.map((area) => (
-              <option key={area.id} value={area.id}>
-                {area.name}
-              </option>
-            ))}
-          </select>
-        </label>
-        <button type="button" onClick={onRunVectorClip} disabled={areas.length === 0}>
-          Run clip
-        </button>
+        <h4 className="dataset-tool-heading">Clip vector</h4>
+        <p className="dataset-tool-helper">Clip features to the selected project area.</p>
+        <div className="dataset-tool-grid">
+          <label className="dataset-tool-field">
+            <span className="dataset-tool-label">Clip area</span>
+            <select value={selectedClipAreaId} onChange={(event) => onSetSelectedClipAreaId(event.target.value)}>
+              {areas.map((area) => (
+                <option key={area.id} value={area.id}>
+                  {area.name}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+        <div className="dataset-tool-action-row">
+          <button type="button" onClick={onRunVectorClip} disabled={areas.length === 0}>
+            Run clip
+          </button>
+        </div>
       </div>
-      <button type="button" onClick={onRunVectorBuffer}>
-        Run buffer (25m)
-      </button>
       <div className="dataset-tool-group">
-        <label>
-          Intersect target
-          <select value={selectedIntersectTargetId} onChange={(event) => onSetSelectedIntersectTargetId(event.target.value)}>
-            <option value="">auto first vector</option>
-            {availableVectorTargets.map((target) => (
-              <option key={target.id} value={target.id}>
-                {target.name}
-              </option>
-            ))}
-          </select>
-        </label>
-        <button type="button" onClick={onRunVectorIntersect}>
-          Run intersect
-        </button>
+        <h4 className="dataset-tool-heading">Buffer vector</h4>
+        <p className="dataset-tool-helper">Create a 25m buffer using the existing vector operation defaults.</p>
+        <div className="dataset-tool-action-row">
+          <button type="button" onClick={onRunVectorBuffer}>
+            Run buffer (25m)
+          </button>
+        </div>
+      </div>
+      <div className="dataset-tool-group">
+        <h4 className="dataset-tool-heading">Intersect vector</h4>
+        <p className="dataset-tool-helper">Intersect with another persisted vector dataset.</p>
+        <div className="dataset-tool-grid">
+          <label className="dataset-tool-field">
+            <span className="dataset-tool-label">Intersect target</span>
+            <select value={selectedIntersectTargetId} onChange={(event) => onSetSelectedIntersectTargetId(event.target.value)}>
+              <option value="">auto first vector</option>
+              {availableVectorTargets.map((target) => (
+                <option key={target.id} value={target.id}>
+                  {target.name}
+                </option>
+              ))}
+            </select>
+            <span className="dataset-tool-helper">Leave automatic to use the first available vector target.</span>
+          </label>
+        </div>
+        <div className="dataset-tool-action-row">
+          <button type="button" onClick={onRunVectorIntersect}>
+            Run intersect
+          </button>
+        </div>
       </div>
     </div>
   )