diff --git a/frontend/src/components/labels/LabelDesignerModal.tsx b/frontend/src/components/labels/LabelDesignerModal.tsx index d7a2926..871a5ab 100644 --- a/frontend/src/components/labels/LabelDesignerModal.tsx +++ b/frontend/src/components/labels/LabelDesignerModal.tsx @@ -31,8 +31,10 @@ interface TplInfo { is_default: boolean; updated_at: string; } -const PREVIEW_MAX_W = 720; -const PREVIEW_MAX_H = 420; +// The preview fills whatever room the centre pane offers — a label cut off at +// 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(null); const canvasRef = useRef(null); + const paneRef = useRef(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([]); 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); - }, [stock]); + // Leave room for the pane's padding and the two control strips above and + // 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) { {/* centre: preview */} -
+
{tpl && stock ? ( <>