Visitor sign in kiosk: multi-site, badge printing, WWCC expiry warnings, admin accounts with 2FA

src/sites.js

@@ -86,9 +86,9 @@ export function badgeHtml(visit, site, { autoPrint = true, photoUrl = null } = {
   const pad = unit * 0.07;
   const nameSize = Math.max(3.2, unit * (portrait ? 0.105 : 0.115));
   const bodySize = Math.max(2.0, unit * (portrait ? 0.055 : 0.062));
-  // Square, matching the crop taken at the kiosk. Slightly smaller on a portrait
-  // badge than the old 4:3 frame, so a square photo still leaves room for the name.
-  const photoWidth = portrait ? unit * 0.46 : unit * 0.42;
+  // Square, matching the crop taken at the kiosk. Sized so that even a long name
+  // wrapping onto two lines still fits above the detail rows on a 62 x 90 mm label.
+  const photoWidth = portrait ? unit * 0.52 : unit * 0.5;
 
   // Red only appears on a two-colour roll (DK-22251 on the QL-820NWB). Anywhere
   // else it prints as grey, so it is off unless the site opts in.
@@ -126,7 +126,8 @@ export function badgeHtml(visit, site, { autoPrint = true, photoUrl = null } = {
     padding: ${pad}mm;
     display: flex;
     flex-direction: ${portrait ? 'column' : 'row'};
-    align-items: ${portrait ? 'center' : 'stretch'};
+    align-items: center;
+    ${portrait ? 'justify-content: center;' : ''}
     text-align: ${portrait ? 'center' : 'left'};
     gap: ${unit * 0.05}mm;
     font-family: "Segoe UI", Arial, Helvetica, sans-serif;
@@ -137,11 +138,12 @@ export function badgeHtml(visit, site, { autoPrint = true, photoUrl = null } = {
     width: ${photoWidth}mm;
     height: ${photoWidth}mm;
     flex: 0 0 auto;
+    align-self: center;
     object-fit: cover;
     border: 0.3mm solid #000;
   }
   .body {
-    flex: 1 1 auto;
+    flex: ${portrait ? '0 1 auto' : '1 1 auto'};
     min-width: 0;
     width: 100%;
     display: flex;
@@ -166,7 +168,9 @@ export function badgeHtml(visit, site, { autoPrint = true, photoUrl = null } = {
     overflow-wrap: anywhere;
   }
   .rows {
-    margin-top: auto;
+    /* Portrait badges centre the whole block; wider ones push the detail rows to
+       the bottom edge, which is where the eye expects them beside a photo. */
+    margin-top: ${portrait ? `${unit * 0.05}mm` : 'auto'};
     padding-top: ${unit * 0.04}mm;
     font-size: ${bodySize}mm;
     line-height: 1.35;