QR Code Sizing Fixes - Remove 50% width constraint, configurable padding #3

New Issue

tonym · 2026-01-15T01:20:16Z

tonym commented

2026-01-15 01:20:16 +00:00

Problem

From upstream issue: QR code takes 50% width even when not needed, wastes label space. Fixed 2mm padding also causes issues on label printers.

When trying to print labels with QR codes, the QR code seems to take up half the width of the label, even if it doesnt need to. As Im printing on a label printer, Id rather not make them any longer than needed.

Solution

1. Remove fixed 50% constraint

In qrCodePrintingDialog.tsx line 171:

// From:
max-width: ${showContent ? "50%" : "100%"};

// To:
max-width: fit-content;
flex-shrink: 0;

2. Configurable QR padding

Add setting to QRCodePrintSettings interface:

qrCodePadding?: number; // in mm, default 2

Add slider in settings UI for 0-5mm padding.

3. Optional: Explicit QR size control

qrCodeSize?: number; // in mm, 0 = auto

Files to modify:

client/src/pages/printing/qrCodePrintingDialog.tsx
client/src/pages/printing/printing.tsx

Priority

Medium - addresses existing upstream issue

## Problem From upstream issue: QR code takes 50% width even when not needed, wastes label space. Fixed 2mm padding also causes issues on label printers. > When trying to print labels with QR codes, the QR code seems to take up half the width of the label, even if it doesnt need to. As Im printing on a label printer, Id rather not make them any longer than needed. ## Solution ### 1. Remove fixed 50% constraint In `qrCodePrintingDialog.tsx` line 171: ```css // From: max-width: ${showContent ? "50%" : "100%"}; // To: max-width: fit-content; flex-shrink: 0; ``` ### 2. Configurable QR padding Add setting to `QRCodePrintSettings` interface: ```typescript qrCodePadding?: number; // in mm, default 2 ``` Add slider in settings UI for 0-5mm padding. ### 3. Optional: Explicit QR size control ```typescript qrCodeSize?: number; // in mm, 0 = auto ``` ## Files to modify: - `client/src/pages/printing/qrCodePrintingDialog.tsx` - `client/src/pages/printing/printing.tsx` ## Priority Medium - addresses existing upstream issue

tonym referenced this issue from a commit

2026-01-15 01:55:06 +00:00

docs: Update CLAUDE.md with Issue #2 completion

tonym referenced this issue from a commit

2026-01-15 01:57:53 +00:00

feat: Add configurable QR code sizing options (#3)

tonym referenced this issue from a commit

2026-01-15 01:58:16 +00:00

docs: Update CLAUDE.md with Issue #3 completion

tonym closed this issue

2026-01-16 03:40:40 +00:00

tonym referenced this issue