From b2ac1fad5bec634ed29a537a19b7096487317310 Mon Sep 17 00:00:00 2001
From: Quality App Developer <dev@moto-adv.com>
Date: Mon, 2 Feb 2026 01:42:41 +0200
Subject: [PATCH] fix: Restructure print_module layout - label preview on left
 side

- Changed main container to flexbox layout with gap
- Left column: Fixed width (400px) for label preview card
- Right column: Flexible width for data preview table
- Label preview now positioned on left as in original app
- Data table fills remaining space on the right
- Responsive flexbox layout preserves functionality
---
 .../modules/labels/print_module.html          | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/app/templates/modules/labels/print_module.html b/app/templates/modules/labels/print_module.html
index 1649267..07a873d 100644
--- a/app/templates/modules/labels/print_module.html
+++ b/app/templates/modules/labels/print_module.html
@@ -113,26 +113,28 @@
     </a>
 </div> #}
 
-<div class="scan-container">
-    <!-- Label Preview Card -->
-    <div class="card scan-form-card">
-        <div class="label-view-title" style="width: 100%; text-align: center; padding: 0 0 15px 0; font-size: 18px; font-weight: bold; letter-spacing: 0.5px;">Label View</div>
-        
-        <!-- Pairing Keys Section - Only show dropdown if multiple keys exist -->
-        <div style="width: 100%; text-align: center; margin-bottom: 15px;">
-            <!-- Dropdown for multiple keys (hidden by default) -->
-            <div id="client-select-container" style="display: none; margin-bottom: 8px;">
-                <label for="client-select" style="font-size: 11px; font-weight: 600; display: block; margin-bottom: 4px;">Select Printer/Client:</label>
-                <select id="client-select" class="form-control form-control-sm" style="width: 85%; margin: 0 auto; font-size: 11px;"></select>
+<div class="scan-container" style="display: flex; gap: 15px; flex-wrap: nowrap;">
+    <!-- Left Column: Label Preview (Fixed width ~400px) -->
+    <div style="flex-shrink: 0; width: 400px;">
+        <!-- Label Preview Card -->
+        <div class="card scan-form-card">
+            <div class="label-view-title" style="width: 100%; text-align: center; padding: 0 0 15px 0; font-size: 18px; font-weight: bold; letter-spacing: 0.5px;">Label View</div>
+            
+            <!-- Pairing Keys Section - Only show dropdown if multiple keys exist -->
+            <div style="width: 100%; text-align: center; margin-bottom: 15px;">
+                <!-- Dropdown for multiple keys (hidden by default) -->
+                <div id="client-select-container" style="display: none; margin-bottom: 8px;">
+                    <label for="client-select" style="font-size: 11px; font-weight: 600; display: block; margin-bottom: 4px;">Select Printer/Client:</label>
+                    <select id="client-select" class="form-control form-control-sm" style="width: 85%; margin: 0 auto; font-size: 11px;"></select>
+                </div>
+                <!-- Manage Keys Button - Only visible for superadmin -->
+                {% if session.role == 'superadmin' %}
+                <a href="{{ url_for('main.download_extension') }}" class="btn btn-info btn-sm" target="_blank" style="font-size: 11px; padding: 4px 12px;">🔑 Manage Keys</a>
+                {% endif %}
             </div>
-            <!-- Manage Keys Button - Only visible for superadmin -->
-            {% if session.role == 'superadmin' %}
-            <a href="{{ url_for('main.download_extension') }}" class="btn btn-info btn-sm" target="_blank" style="font-size: 11px; padding: 4px 12px;">🔑 Manage Keys</a>
-            {% endif %}
-        </div>
-        
-        <!-- Label Preview Section -->
-        <div id="label-preview" style="padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px;">
+            
+            <!-- Label Preview Section -->
+            <div id="label-preview" style="padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px; margin: 0 auto;">
             <!-- Label content rectangle -->
             <div id="label-content" style="position: absolute; top: 65.7px; left: 11.34px; width: 227.4px; height: 321.3px; background: white;">
                 <!-- Top row content: Company name (removed) -->
@@ -299,13 +301,16 @@
             </div>
         </div>
     </div>
-    
-    <!-- Data Preview Card -->
-    <div class="card scan-table-card">
-        <h3>Data Preview (Unprinted Orders)</h3>
-        <button id="check-db-btn" class="btn btn-primary mb-3">Load Orders</button>
-        <div class="report-table-container">
-            <table class="scan-table print-module-table">
+    </div>
+
+    <!-- Right Column: Data Preview (Flexible width) -->
+    <div style="flex: 1; min-width: 0;">
+        <!-- Data Preview Card -->
+        <div class="card scan-table-card">
+            <h3>Data Preview (Unprinted Orders)</h3>
+            <button id="check-db-btn" class="btn btn-primary mb-3">Load Orders</button>
+            <div class="report-table-container">
+                <table class="scan-table print-module-table">
                 <thead>
                     <tr>
                         <th>ID</th>
@@ -331,6 +336,7 @@
             </table>
         </div>
     </div>
+    </div>
 </div>
 
 <!-- JavaScript Libraries -->