fix(barcode-generator-web): size Data Matrix SVG by viewBox aspect ratio

bwip-js SVGs carry only a viewBox, no width/height attributes, so the
rendered element defaulted to intrinsic sizing instead of the
configured size. Derive pixel dimensions from the viewBox and apply
them via inline style.

Author: samuelreichert

packages/pluggableWidgets/barcode-generator-web/src/components/DataMatrix.tsx

@@ -39,6 +39,18 @@ function encodeDataMatrix(config: DataMatrixTypeConfig): string {
         : datamatrix({ ...opts, bcid: "datamatrix" }, drawingSVG());
 }
 
+/** bwip-js SVGs only carry a viewBox, no width/height attributes; derive pixel dimensions from it. */
+function getSvgPixelSize(svg: string, size: number): { width: number; height: number } {
+    const match = svg.match(/viewBox="0 0 (\d+(?:\.\d+)?) (\d+(?:\.\d+)?)"/);
+    if (!match) {
+        return { width: size, height: size };
+    }
+    const [viewBoxWidth, viewBoxHeight] = [parseFloat(match[1]), parseFloat(match[2])];
+    return viewBoxWidth >= viewBoxHeight
+        ? { width: size, height: (size * viewBoxHeight) / viewBoxWidth }
+        : { width: (size * viewBoxWidth) / viewBoxHeight, height: size };
+}
+
 export function DataMatrixRenderer({ config }: DataMatrixRendererProps): ReactElement {
     const containerRef = useRef<HTMLDivElement>(null);
     const { codeValue, downloadButton, size, gs1Mode } = config;
@@ -96,10 +108,17 @@ export function DataMatrixRenderer({ config }: DataMatrixRendererProps): ReactEl
         />
     );
 
+    const { width, height } = getSvgPixelSize(svg, size);
+
     return (
         <div className="barcode-renderer datamatrix-renderer">
             {buttonPosition === "top" && button}
-            <div ref={containerRef} className="datamatrix-svg" dangerouslySetInnerHTML={{ __html: svg }} />
+            <div
+                ref={containerRef}
+                className="datamatrix-svg"
+                style={{ width, height }}
+                dangerouslySetInnerHTML={{ __html: svg }}
+            />
             {buttonPosition === "bottom" && button}
         </div>
     );

packages/pluggableWidgets/barcode-generator-web/src/ui/BarcodeGenerator.scss

@@ -28,6 +28,16 @@ $widget-prefix: "barcode-generator";
         height: auto;
     }
 
+    .datamatrix-svg {
+        max-width: 100%;
+
+        svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
     .qrcode-renderer-title {
         font-weight: var(--font-weight-normal);
         font-size: var(--font-size-small);
@@ -98,3 +108,13 @@ $widget-prefix: "barcode-generator";
     position: absolute;
     object-fit: contain;
 }
+
+.datamatrix-preview-image {
+    max-width: 100%;
+
+    svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+}