style: overhaul print label to prioritize QR code as requested

D3L05 · D3L05 · commit 730d84b51524 · 2026-02-20T19:56:17.000-03:00
diff --git a/whereisit/Dockerfile b/whereisit/Dockerfile
@@ -6,7 +6,7 @@ COPY frontend/package.json frontend/package-lock.json ./
 RUN npm ci
 
 # Force cache invalidation for source code
-ARG CACHEBUST=202602202600
+ARG CACHEBUST=202602202610
 RUN echo "Cache bust: $CACHEBUST"
 
 COPY frontend/ ./
diff --git a/whereisit/config.yaml b/whereisit/config.yaml
@@ -1,5 +1,5 @@
 name: "WhereIsIt"
-version: "0.4.26"
+version: "0.4.27"
 slug: "whereisit"
 description: "Physical storage management for Home Assistant"
 url: "https://github.com/D3L05/whereisit"
diff --git a/whereisit/frontend/src/views/box-view.js b/whereisit/frontend/src/views/box-view.js
@@ -268,43 +268,51 @@ export class BoxView extends LitElement {
                         }
                         .label-container {
                             border: 2px solid #000;
-                            padding: 20px;
+                            padding: 24px 16px;
                             border-radius: 12px;
-                            width: 300px;
+                            width: 320px;
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
                         }
-                        .unit-name {
-                            font-size: 14px;
-                            color: #666;
-                            margin-bottom: 4px;
-                            text-transform: uppercase;
-                            letter-spacing: 1px;
+                        .qr-img {
+                            width: 240px;
+                            height: 240px;
+                            margin-bottom: 16px;
                         }
                         .box-name {
-                            font-size: 28px;
-                            font-weight: bold;
-                            margin-bottom: 16px;
+                            font-size: 32px;
+                            font-weight: 900;
+                            line-height: 1.1;
+                            margin-bottom: 8px;
+                            color: #000;
                         }
-                        .qr-img {
-                            width: 150px;
-                            height: 150px;
+                        .unit-name {
+                            font-size: 16px;
+                            font-weight: 500;
+                            color: #444;
+                            margin-bottom: 8px;
                         }
                         .slug {
-                            margin-top: 12px;
+                            margin-top: 8px;
                             font-family: monospace;
-                            font-size: 12px;
-                            color: #888;
+                            font-size: 14px;
+                            color: #666;
+                            background: #f5f5f5;
+                            padding: 4px 8px;
+                            border-radius: 4px;
                         }
                         @media print {
                             body { width: 100%; height: auto; }
-                            .label-container { border: none; }
+                            .label-container { border: none; padding: 0; }
                         }
                     </style>
                 </head>
                 <body>
                     <div class="label-container">
-                        <div class="unit-name">${unitName}</div>
-                        <div class="box-name">${this.box.name}</div>
                         <img src="${qrUrl}" class="qr-img" />
+                        <div class="box-name">${this.box.name}</div>
+                        <div class="unit-name">${unitName}</div>
                         <div class="slug">ID: ${this.box.slug}</div>
                     </div>
                     <script>
