Review

Auto-fit type on digital shelf-label preview

PriceTag Studio's ESL (electronic shelf label) preview was clipping long unit prices on the 2" face. Measure the chip with ResizeObserver and scale font + padding so the price always fills the available width during merchandising review.

ReactTier 2reactresize-observerfrontend

Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.

components/pricing/ShelfLabelPreview.tsx+21-1

14	14		export function ShelfLabelPreview({ sku, price, unit, promo }: Props) {
	15	+	const chipRef = useRef<HTMLDivElement>(null);
	16	+	const [typeScale, setTypeScale] = useState(1);
15	17
	18	+	useEffect(() => {
	19	+	const el = chipRef.current;
	20	+	if (!el) return;
	21	+	const ro = new ResizeObserver(([entry]) => {
	22	+	const w = entry.contentRect.width;
	23	+	// Fit price type to the chip so long unit strings don't overflow the 2" ESL face
	24	+	setTypeScale(Math.min(1.4, Math.max(0.75, w / 160)));
	25	+	});
	26	+	ro.observe(el);
	27	+	return () => ro.disconnect();
	28	+	}, []);
16	29
17	30		return (
18		-	<div className="esl-chip">
	31	+	<div
	32	+	ref={chipRef}
	33	+	className="esl-chip"
	34	+	style={{
	35	+	fontSize: `${Math.round(14 * typeScale)}px`,
	36	+	padding: `${Math.round(8 * typeScale)}px ${Math.round(12 * typeScale)}px`,
	37	+	}}
	38	+	>
19	39		<span className="esl-sku">{sku}</span>
20	40		<span className="esl-price">{price}<small>/{unit}</small></span>
21	41		{promo ? <span className="esl-promo">{promo}</span> : null}
22	42		</div>
23	43		);
24	44		}