From 97b9ae9fe28fac085c30df6c8ffc76d0ced78092 Mon Sep 17 00:00:00 2001
From: Scheianu Ionut <scheianuionut@gmail.com>
Date: Sun, 5 Oct 2025 09:40:03 +0300
Subject: [PATCH] centered preview in the create location page

---
 py_app/app/templates/create_locations.html | 26 +++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/py_app/app/templates/create_locations.html b/py_app/app/templates/create_locations.html
index 1916580..fac2463 100644
--- a/py_app/app/templates/create_locations.html
+++ b/py_app/app/templates/create_locations.html
@@ -5,8 +5,8 @@
 <style>
 /* Barcode label preview */
 #barcode-label-preview {
-    width: 4cm;
-    height: 8cm;
+    width: 8cm;
+    height: 4cm;
     border: 2px solid #333;
     background: white;
     display: flex;
@@ -15,6 +15,7 @@
     justify-content: center;
     margin: 10px auto;
     position: relative;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
 }
 
 #barcode-label-preview .location-text {
@@ -25,8 +26,15 @@
 }
 
 #barcode-label-preview #location-barcode {
+    display: block;
+    margin: 0 auto;
     max-width: 90%;
-    max-height: 60%;
+    max-height: 70%;
+}
+
+#barcode-label-preview #barcode-placeholder {
+    text-align: center;
+    width: 100%;
 }
 
 .print-section {
@@ -83,12 +91,14 @@
             <h3 style="font-size: 1.1em; margin-bottom: 12px;">Print Location Barcode</h3>
             
             <!-- Label Preview -->
-            <div id="barcode-label-preview">
-                <div class="location-text">
-                    <div id="location-code-display">Select a location</div>
+            <div id="barcode-label-preview" style="display: flex; align-items: center; justify-content: center;">
+                <div style="width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
+                    <div class="location-text">
+                        <div id="location-code-display">Select a location</div>
+                    </div>
+                    <canvas id="location-barcode" style="display: none;"></canvas>
+                    <div id="barcode-placeholder" style="color: #999; font-style: italic; text-align: center;">No location selected</div>
                 </div>
-                <canvas id="location-barcode" style="display: none;"></canvas>
-                <div id="barcode-placeholder" style="color: #999; font-style: italic;">No location selected</div>
             </div>
             
             <!-- Print Controls -->