style(labels): fit the preview to the pane

A fixed 720 px cap cut a 98 mm label off at the RST column and wasted half the
window; the scale now follows the centre pane's measured size, with a floor so
small stock never renders unreadably.

frontend/src/components/labels/LabelDesignerModal.tsx

@@ -31,8 +31,10 @@ interface TplInfo {
   is_default: boolean; updated_at: string;
 }
 
-const PREVIEW_MAX_W = 720;
+// The preview fills whatever room the centre pane offers — a label cut off at
-const PREVIEW_MAX_H = 420;
+// the edge cannot be judged, and 90 mm across a fixed 720 px wasted half the
+// window. Measured live so a resize re-fits.
+const PREVIEW_MIN_SCALE = 2;
 
 export function LabelDesignerModal({ open, onClose }: Props) {
   const { t } = useI18n();
@@ -56,6 +58,17 @@ export function LabelDesignerModal({ open, onClose }: Props) {
   const [stockDraft, setStockDraft] = useState<LabelStock | null>(null);
 
   const canvasRef = useRef<HTMLCanvasElement>(null);
+  const paneRef = useRef<HTMLDivElement>(null);
+  const [paneSize, setPaneSize] = useState({ w: 720, h: 420 });
+  useEffect(() => {
+    const el = paneRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => {
+      setPaneSize({ w: el.clientWidth, h: el.clientHeight });
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [open, tpl != null]);
   const boxesRef = useRef<ElementBox[]>([]);
   const dragRef = useRef<{ idx: number; dxMm: number; dyMm: number } | null>(null);
 
@@ -98,8 +111,12 @@ export function LabelDesignerModal({ open, onClose }: Props) {
   // ── canvas ────────────────────────────────────────────────────────────
   const scale = useMemo(() => {
     if (!stock) return 4;
-    return Math.min(PREVIEW_MAX_W / stock.w_mm, PREVIEW_MAX_H / stock.h_mm);
+    // Leave room for the pane's padding and the two control strips above and
-  }, [stock]);
+    // below the canvas; never shrink below a scale where 8 pt is readable.
+    const availW = Math.max(200, paneSize.w - 56);
+    const availH = Math.max(120, paneSize.h - 130);
+    return Math.max(PREVIEW_MIN_SCALE, Math.min(availW / stock.w_mm, availH / stock.h_mm));
+  }, [stock, paneSize]);
 
   const paint = useCallback(() => {
     const cv = canvasRef.current;
@@ -356,7 +373,7 @@ export function LabelDesignerModal({ open, onClose }: Props) {
           </div>
 
           {/* centre: preview */}
-          <div className="flex-1 min-w-0 flex flex-col items-center justify-center bg-muted/30 overflow-auto p-6 gap-3">
+          <div ref={paneRef} className="flex-1 min-w-0 flex flex-col items-center justify-center bg-muted/30 overflow-auto p-6 gap-3">
             {tpl && stock ? (
               <>
                 <div className="flex items-center gap-2 text-xs text-muted-foreground">