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
This commit is contained in:
Quality App Developer
2026-02-02 01:42:41 +02:00
parent 7d7f3ce4fe
commit b2ac1fad5b

View File

@@ -113,7 +113,9 @@
</a>
</div> #}
<div class="scan-container">
<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>
@@ -132,7 +134,7 @@
</div>
<!-- Label Preview Section -->
<div id="label-preview" style="padding: 10px; position: relative; background: #fafafa; width: 301px; height: 434.7px;">
<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,7 +301,10 @@
</div>
</div>
</div>
</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>
@@ -332,6 +337,7 @@
</div>
</div>
</div>
</div>
<!-- JavaScript Libraries -->
<!-- JsBarcode library for real barcode generation -->