From 834bcc808a560b346a11077d001e1b1264980294 Mon Sep 17 00:00:00 2001
From: Quality App Developer <dev@moto-adv.com>
Date: Mon, 2 Feb 2026 02:13:48 +0200
Subject: [PATCH] fix: Improve barcode positioning in label preview

- Repositioned #barcode-frame to bottom (10px from bottom, left: 11.34px)
- Set barcode-frame width to 227.4px (label content width)
- Added SVG height styling for horizontal barcode (50px)
- Repositioned #vertical-barcode-frame to right side (right: 0)
- Set vertical barcode frame dimensions (32px width, 321.3px height)
- Added SVG rotation for vertical barcode (-90 degrees)
- Improved flexbox centering for vertical barcode
---
 .../modules/labels/print_module.html          | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/templates/modules/labels/print_module.html b/app/templates/modules/labels/print_module.html
index ace1917..1a5f371 100644
--- a/app/templates/modules/labels/print_module.html
+++ b/app/templates/modules/labels/print_module.html
@@ -107,33 +107,36 @@
     #barcode-frame {
         position: absolute;
         bottom: 10px;
-        left: 50%;
-        transform: translateX(-50%);
+        left: 11.34px;
+        right: 11.34px;
         width: 227.4px;
         z-index: 5;
+        text-align: center;
     }
 
-    #barcode-display {
-        width: 100%;
-        height: auto;
+    #barcode-frame svg {
         display: block;
+        margin: 0 auto;
+        height: 50px;
     }
 
     #vertical-barcode-frame {
         position: absolute;
-        right: 11.34px;
+        right: 0;
         top: 65.7px;
         width: 32px;
         height: 321.3px;
         z-index: 5;
-        writing-mode: vertical-rl;
-        transform: rotate(180deg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 
-    #vertical-barcode-display {
+    #vertical-barcode-frame svg {
         width: 100%;
-        height: 100%;
-        display: block;
+        height: auto;
+        transform: rotate(-90deg);
+        transform-origin: center;
     }
 </style>
 {% endblock %}