From d17a66b0ec201c3daf5fc9de8510c2250c0f2f38 Mon Sep 17 00:00:00 2001
From: tonym <anthonymoon61@gmail.com>
Date: Wed, 14 Jan 2026 19:57:52 -0600
Subject: [PATCH] feat: Add configurable QR code sizing options (#3)

Addresses https://github.com/Donkie/Spoolman/issues/671

Changes:
- Remove fixed 50% max-width constraint on QR code container
- Add qrCodePadding setting (0-10mm, default 2mm) for white space
- Add qrCodeMaxWidth setting (0-100%, 0 = auto/fit-content)
- Add UI controls (slider + input) for both new settings
- Settings are disabled when QR code is turned off

The previous behavior forced QR codes to 50% width when label text
was shown, wasting label space on small labels. New default uses
fit-content for optimal sizing while allowing manual control.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 client/public/locales/en/common.json          |  7 +-
 client/src/pages/printing/printing.tsx        |  2 +
 .../pages/printing/qrCodePrintingDialog.tsx   | 74 ++++++++++++++++++-
 3 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json
index 09db15b..713b4e2 100644
--- a/client/public/locales/en/common.json
+++ b/client/public/locales/en/common.json
@@ -123,7 +123,12 @@
                 "no": "No",
                 "simple": "Simple",
                 "withIcon": "With Icon"
-            }
+            },
+            "qrCodePadding": "QR Code Padding",
+            "qrCodePaddingTooltip": "White space around the QR code for better scanning reliability",
+            "qrCodeMaxWidth": "QR Code Max Width",
+            "qrCodeMaxWidthTooltip": "Maximum width of QR code as percentage of label. Set to 0 for automatic sizing.",
+            "auto": "Auto"
         },
         "spoolSelect": {
             "title": "Select Spools",
diff --git a/client/src/pages/printing/printing.tsx b/client/src/pages/printing/printing.tsx
index 9dd37a0..e3cbe89 100644
--- a/client/src/pages/printing/printing.tsx
+++ b/client/src/pages/printing/printing.tsx
@@ -22,6 +22,8 @@ export interface QRCodePrintSettings {
   showContent?: boolean;
   showQRCodeMode?: "no" | "simple" | "withIcon";
   textSize?: number;
+  qrCodePadding?: number; // in mm, default 2
+  qrCodeMaxWidth?: number; // percentage 0-100, 0 = no constraint (auto)
   printSettings: PrintSettings;
 }
 
diff --git a/client/src/pages/printing/qrCodePrintingDialog.tsx b/client/src/pages/printing/qrCodePrintingDialog.tsx
index bea241d..35eb779 100644
--- a/client/src/pages/printing/qrCodePrintingDialog.tsx
+++ b/client/src/pages/printing/qrCodePrintingDialog.tsx
@@ -41,6 +41,8 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
   const showContent = printSettings?.showContent === undefined ? true : printSettings?.showContent;
   const showQRCodeMode = printSettings?.showQRCodeMode || "withIcon";
   const textSize = printSettings?.textSize || 3;
+  const qrCodePadding = printSettings?.qrCodePadding ?? 2;
+  const qrCodeMaxWidth = printSettings?.qrCodeMaxWidth ?? 0; // 0 = auto (no constraint)
 
   const elements = items.map((item) => {
     return (
@@ -155,6 +157,73 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
               </Col>
             </Row>
           </Form.Item>
+          <Form.Item label={t("printing.qrcode.qrCodePadding")} tooltip={t("printing.qrcode.qrCodePaddingTooltip")}>
+            <Row>
+              <Col span={12}>
+                <Slider
+                  disabled={showQRCodeMode === "no"}
+                  tooltip={{ formatter: (value) => `${value} mm` }}
+                  min={0}
+                  max={5}
+                  value={qrCodePadding}
+                  step={0.5}
+                  onChange={(value) => {
+                    printSettings.qrCodePadding = value;
+                    setPrintSettings(printSettings);
+                  }}
+                />
+              </Col>
+              <Col span={12}>
+                <InputNumber
+                  disabled={showQRCodeMode === "no"}
+                  min={0}
+                  max={10}
+                  step={0.5}
+                  style={{ margin: "0 16px" }}
+                  value={qrCodePadding}
+                  addonAfter="mm"
+                  onChange={(value) => {
+                    printSettings.qrCodePadding = value ?? 2;
+                    setPrintSettings(printSettings);
+                  }}
+                />
+              </Col>
+            </Row>
+          </Form.Item>
+          <Form.Item label={t("printing.qrcode.qrCodeMaxWidth")} tooltip={t("printing.qrcode.qrCodeMaxWidthTooltip")}>
+            <Row>
+              <Col span={12}>
+                <Slider
+                  disabled={showQRCodeMode === "no"}
+                  tooltip={{ formatter: (value) => (value === 0 ? t("printing.qrcode.auto") : `${value}%`) }}
+                  min={0}
+                  max={100}
+                  value={qrCodeMaxWidth}
+                  step={5}
+                  onChange={(value) => {
+                    printSettings.qrCodeMaxWidth = value;
+                    setPrintSettings(printSettings);
+                  }}
+                />
+              </Col>
+              <Col span={12}>
+                <InputNumber
+                  disabled={showQRCodeMode === "no"}
+                  min={0}
+                  max={100}
+                  step={5}
+                  style={{ margin: "0 16px" }}
+                  value={qrCodeMaxWidth}
+                  addonAfter="%"
+                  placeholder={t("printing.qrcode.auto")}
+                  onChange={(value) => {
+                    printSettings.qrCodeMaxWidth = value ?? 0;
+                    setPrintSettings(printSettings);
+                  }}
+                />
+              </Col>
+            </Row>
+          </Form.Item>
 
           {extraSettings}
         </>
@@ -168,14 +237,15 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
             }
 
             .print-page .print-qrcode-container {
-              max-width: ${showContent ? "50%" : "100%"};
+              max-width: ${qrCodeMaxWidth > 0 ? `${qrCodeMaxWidth}%` : "fit-content"};
               display: flex;
+              flex-shrink: 0;
             }
 
             .print-page .print-qrcode {
               width: auto !important;
               height: auto !important;
-              padding: 2mm;
+              padding: ${qrCodePadding}mm;
             }
 
             .print-page .print-qrcode-title {