From 6829f2840c7c700d37e72c6389bd3ba540acecf3 Mon Sep 17 00:00:00 2001
From: makearmy <alex@makearmy.io>
Date: Sun, 5 Oct 2025 22:17:37 -0400
Subject: [PATCH] list and details cleanup

---
 components/details/CO2GalvoDetail.tsx | 74 ++++++++++++++-------------
 1 file changed, 38 insertions(+), 36 deletions(-)

diff --git a/components/details/CO2GalvoDetail.tsx b/components/details/CO2GalvoDetail.tsx
index 1d807843..b7cf3a42 100644
--- a/components/details/CO2GalvoDetail.tsx
+++ b/components/details/CO2GalvoDetail.tsx
@@ -253,31 +253,31 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
         {rec.setting_notes ? <Field label="Notes" value={<p className="whitespace-pre-wrap">{rec.setting_notes}</p>} /> : null}
         </section>
 
-        {/* Images (full width, click to expand) */}
+        {/* Images (full width, click to expand, ~75% smaller) */}
         {(photoSrc || screenSrc) && (
             <section className="grid grid-cols-2 gap-4">
             {photoSrc ? (
-                <figure className="space-y-1">
+                <figure className="space-y-1 justify-self-start">
                 <div
-                className="border rounded overflow-hidden cursor-zoom-in"
+                className="border rounded overflow-hidden cursor-zoom-in mx-auto w-40 md:w-48"
                 style={{ aspectRatio: "1 / 1" }}
                 onClick={() => setViewerSrc(photoSrc)}
                 >
                 <img src={photoSrc} alt="Result" className="w-full h-full object-cover" loading="lazy" />
                 </div>
-                <figcaption className="text-xs text-muted-foreground">Result</figcaption>
+                <figcaption className="text-xs text-muted-foreground text-center">Result</figcaption>
                 </figure>
             ) : null}
             {screenSrc ? (
-                <figure className="space-y-1">
+                <figure className="space-y-1 justify-self-start">
                 <div
-                className="border rounded overflow-hidden cursor-zoom-in"
+                className="border rounded overflow-hidden cursor-zoom-in mx-auto w-40 md:w-48"
                 style={{ aspectRatio: "1 / 1" }}
                 onClick={() => setViewerSrc(screenSrc)}
                 >
                 <img src={screenSrc} alt="Settings Screenshot" className="w-full h-full object-cover" loading="lazy" />
                 </div>
-                <figcaption className="text-xs text-muted-foreground">Settings Screenshot</figcaption>
+                <figcaption className="text-xs text-muted-foreground text-center">Settings Screenshot</figcaption>
                 </figure>
             ) : null}
             </section>
@@ -296,7 +296,6 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
         <Field label="Beam Expander" value={rec.lens_exp?.name || rec.lens_exp || null} suffix="x" />
         <Field
         label="Scan Lens"
-        // removed "mm" units per request
         value={
             rec.lens
             ? `${rec.lens.field_size ?? "—"}${rec.lens.focal_length ? ` / ${rec.lens.focal_length}` : ""}`
@@ -326,26 +325,29 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
             <section className="space-y-3">
             <h2 className="text-lg font-semibold">Fill Settings</h2>
             <div className="grid md:grid-cols-2 gap-3">
-            {rec.fill_settings!.map((r: any, i: number) => (
-                <div key={i} className="border rounded p-3 space-y-2">
-                <div className="font-medium">{r.name || `Fill ${i + 1}`}</div>
-                <div className="grid sm:grid-cols-2 gap-2">
-                <Field label="Type" value={TYPE_LABEL[r.type] || "—"} />
-                <Field label="Power (%)" value={r.power ?? "—"} />
-                <Field label="Speed (mm/s)" value={r.speed ?? "—"} />
-                <Field label="Interval" value={r.interval ?? "—"} />
-                <Field label="Angle" value={r.angle ?? "—"} />
-                <Field label="Pass" value={r.pass ?? "—"} />
-                <Field label="Freq (kHz)" value={r.frequency ?? "—"} />
-                <Field label="Pulse (ns)" value={r.pulse ?? "—"} />
-                <Field label="Increment" value={r.increment ?? "—"} />
-                <Field label="Auto Rotate" value={yesNo(r.auto)} />
-                <Field label="Crosshatch" value={yesNo(r.cross)} />
-                <Field label="Flood Fill" value={yesNo(r.flood)} />
-                <Field label="Air Assist" value={yesNo(r.air)} />
-                </div>
-                </div>
-            ))}
+            {rec.fill_settings!.map((r: any, i: number) => {
+                const showIncrement = !!r.auto;
+                return (
+                    <div key={i} className="border rounded p-3 space-y-2">
+                    <div className="font-medium">{r.name || `Fill ${i + 1}`}</div>
+                    <div className="grid sm:grid-cols-2 gap-2">
+                    <Field label="Type" value={TYPE_LABEL[r.type] || "—"} />
+                    <Field label="Power" value={r.power ?? "—"} suffix="%" />
+                    <Field label="Speed" value={r.speed ?? "—"} suffix="mm/s" />
+                    <Field label="Interval" value={r.interval ?? "—"} />
+                    <Field label="Angle" value={r.angle ?? "—"} suffix="°" />
+                    <Field label="Pass" value={r.pass ?? "—"} />
+                    <Field label="Frequency" value={r.frequency ?? "—"} suffix="kHz" />
+                    <Field label="Pulse" value={r.pulse ?? "—"} suffix="ns" />
+                    <Field label="Auto Rotate" value={yesNo(r.auto)} />
+                    {showIncrement && <Field label="Auto Rotate Increment" value={r.increment ?? "—"} suffix="°" />}
+                    <Field label="Crosshatch" value={yesNo(r.cross)} />
+                    <Field label="Flood Fill" value={yesNo(r.flood)} />
+                    <Field label="Air Assist" value={yesNo(r.air)} />
+                    </div>
+                    </div>
+                );
+            })}
             </div>
             </section>
         )}
@@ -358,10 +360,10 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
                 <div key={i} className="border rounded p-3 space-y-2">
                 <div className="font-medium">{r.name || `Line ${i + 1}`}</div>
                 <div className="grid sm:grid-cols-2 gap-2">
-                <Field label="Power (%)" value={r.power ?? "—"} />
-                <Field label="Speed (mm/s)" value={r.speed ?? "—"} />
-                <Field label="Freq (kHz)" value={r.frequency ?? "—"} />
-                <Field label="Pulse (ns)" value={r.pulse ?? "—"} />
+                <Field label="Power" value={r.power ?? "—"} suffix="%" />
+                <Field label="Speed" value={r.speed ?? "—"} suffix="mm/s" />
+                <Field label="Frequency" value={r.frequency ?? "—"} suffix="kHz" />
+                <Field label="Pulse" value={r.pulse ?? "—"} suffix="ns" />
                 <Field label="Pass" value={r.pass ?? "—"} />
                 <Field label="Step" value={r.step ?? "—"} />
                 <Field label="Size" value={r.size ?? "—"} />
@@ -387,12 +389,12 @@ export default function CO2GalvoDetail({ id, editable }: { id: string | number;
                 <div className="grid sm:grid-cols-2 gap-2">
                 <Field label="Type" value={TYPE_LABEL[r.type] || "—"} />
                 <Field label="Dither" value={DITHER_LABEL(r.dither)} />
-                <Field label="Power (%)" value={r.power ?? "—"} />
-                <Field label="Speed (mm/s)" value={r.speed ?? "—"} />
+                <Field label="Power" value={r.power ?? "—"} suffix="%" />
+                <Field label="Speed" value={r.speed ?? "—"} suffix="mm/s" />
                 <Field label="Interval" value={r.interval ?? "—"} />
                 <Field label="Pass" value={r.pass ?? "—"} />
-                <Field label="Freq (kHz)" value={r.frequency ?? "—"} />
-                <Field label="Pulse (ns)" value={r.pulse ?? "—"} />
+                <Field label="Frequency" value={r.frequency ?? "—"} suffix="kHz" />
+                <Field label="Pulse" value={r.pulse ?? "—"} suffix="ns" />
                 {!!r.halftone_cell && <Field label="Halftone Cell" value={r.halftone_cell} />}
                 {!!r.halftone_angle && <Field label="Halftone Angle" value={r.halftone_angle} />}
                 <Field label="Dot" value={r.dot ?? "—"} />