Update label format from Avery L4731REV-25 to Avery 8167

Switch from A4/European labels to US Letter size Avery 8167 labels:
- Page size: A4 → US Letter (8.5" × 11")
- Label size: 25.4mm × 10mm → 44.45mm × 12.7mm (1.75" × 0.5")
- Grid: 7×27 (189 labels) → 4×20 (80 labels)
- Margins and gaps adjusted for Avery 8167 specifications

https://claude.ai/code/session_01FQAPQeBx9CFdivsHTqAGxn

CLAUDE.md

@@ -18,29 +18,29 @@ The application uses CDN-hosted dependencies:
 
 Single-page application using AlpineJS for reactivity. Key structure in `index.html`:
 
-- **`qrCodeApp()`** (line 255): AlpineJS component containing all application state and logic
+- **`qrCodeApp()`** (line 259): AlpineJS component containing all application state and logic
   - `generateLabels()`: Creates label data array with QR code URLs via external API (api.qrserver.com)
   - `printLabels()`: Triggers browser print dialog
-  - Generates 189 labels per sheet (7 columns × 27 rows)
+  - Generates 80 labels per sheet (4 columns × 20 rows)
 
-- **Print styling**: Uses CSS `@page` rule for A4 paper with zero margins (requires Chrome/Chromium)
+- **Print styling**: Uses CSS `@page` rule for US Letter paper with zero margins (requires Chrome/Chromium)
 
-- **Label format**: Hardcoded for Avery L4731REV-25 labels (see specifications below)
+- **Label format**: Hardcoded for Avery 8167 labels (see specifications below)
 
-## Avery L4731REV-25 Label Specifications
+## Avery 8167 Label Specifications
 
-Page: A4 (210mm × 297mm)
+Page: US Letter (8.5" × 11" / 215.9mm × 279.4mm)
 
 | Dimension | Value |
 |-----------|-------|
-| Label size | 25.4mm × 10mm |
+| Label size | 1.75" × 0.5" (44.45mm × 12.7mm) |
-| Grid | 7 columns × 27 rows (189 labels) |
+| Grid | 4 columns × 20 rows (80 labels) |
-| Top/Bottom margin | 13.5mm |
+| Top/Bottom margin | 0.5" (12.7mm) |
-| Left/Right margin | 8.6mm |
+| Left/Right margin | 0.3" (7.62mm) |
-| Horizontal gap | 2.5mm |
+| Horizontal gap | 0.3" (7.62mm) |
-| Vertical gap | 0mm (labels touch) |
+| Vertical gap | 0" (labels touch) |
-| Horizontal pitch | 27.9mm |
+| Horizontal pitch | 2.05" (52.07mm) |
-| Vertical pitch | 10mm |
+| Vertical pitch | 0.5" (12.7mm) |
 
 ## Code Style
 

index.html

@@ -19,7 +19,7 @@
         @page {
           /* Remove default margin set by the browser */
           margin: 0mm;
-          size: A4;
+          size: Letter;
         }
       }
     </style>
@@ -56,8 +56,8 @@
         <p>
           This tool generates QR code labels for the
           <abbr title="Archive Serial Number">ASN</abbr> feature. You can
-          generate labels for up to 189 documents at once. The labels are
+          generate labels for up to 80 documents at once. The labels are
-          formatted to <strong>fit on Avery L4731REV-25 labels</strong>.
+          formatted to <strong>fit on Avery 8167 labels</strong> (US Letter size).
         </p>
 
         <p>
@@ -100,12 +100,12 @@
               <p
                 class="prose prose-sm prose-a:text-blue-600 prose-a:underline hover:prose-a:text-blue-700 max-w-none"
               >
-                The number of labels generated will be 7 x 27 = 189. This means
+                The number of labels generated will be 4 x 20 = 80. This means
                 the <strong>next batch</strong> of labels should
                 <strong
                   >start with
-                  <span x-text="parseInt(startNumber, 10) + 189"
+                  <span x-text="parseInt(startNumber, 10) + 80"
-                    >190</span
+                    >81</span
                   ></strong
                 >.
               </p>
@@ -198,14 +198,14 @@
     </div>
 
     <div
-      class="container mx-auto w-[210mm] border px-[8.6mm] py-[13.5mm] print:w-full print:max-w-full print:border-0"
+      class="container mx-auto w-[215.9mm] border px-[7.62mm] py-[12.7mm] print:w-full print:max-w-full print:border-0"
     >
       <!-- Display QR Code Labels -->
-      <ol class="grid grid-cols-7 gap-x-[2.5mm]">
+      <ol class="grid grid-cols-4 gap-x-[7.62mm]">
         <template x-for="label in labels">
-          <li class="h-[10mm] w-[25.4mm]">
+          <li class="h-[12.7mm] w-[44.45mm]">
             <div
-              class="flex h-[9mm] w-[24.4mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300"
+              class="flex h-[11.7mm] w-[43.45mm] items-center border-[0.5mm] odd:border-blue-500 even:border-red-300"
               :class="{'even:border-transparent odd:border-transparent': !borderToggle}"
             >
               <img
@@ -213,17 +213,17 @@
                 alt=""
                 width="100"
                 height="100"
-                class="mr-[0.5mm] aspect-square h-[9mm] w-[9mm] flex-none"
+                class="mr-[1mm] aspect-square h-[11mm] w-[11mm] flex-none"
                 referrerpolicy="no-referrer"
               />
               <div
                 class="flex-grow"
                 :class="{
-                'text-[3.9mm]': label.text.length <= 6,
+                'text-[4.5mm]': label.text.length <= 6,
-                'text-[3.2mm]': label.text.length == 7,
+                'text-[4mm]': label.text.length == 7,
-                'text-[2.7mm]': label.text.length == 8,
+                'text-[3.5mm]': label.text.length == 8,
-                'text-[2.4mm]': label.text.length == 9,
+                'text-[3mm]': label.text.length == 9,
-                'text-[2.1mm]': label.text.length >= 10,
+                'text-[2.5mm]': label.text.length >= 10,
               }"
                 x-text="label.text"
               ></div>
@@ -294,7 +294,7 @@
 
           generateLabels() {
             this.labels = [];
-            let totalLabels = 7 * 27; // 7 columns x 27 rows
+            let totalLabels = 4 * 20; // 4 columns x 20 rows
             let startNumberInt = parseInt(this.startNumber, 10); // Ensure startNumber is an integer
             let leadingZerosInt = parseInt(this.leadingZeros, 10); // Ensure leadingZeros is an integer
             for (let i = 0; i < totalLabels; i++) {