From af60a77399e9cc4b1765f59651b73133b4c6c822 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Fri, 7 Aug 2026 09:22:41 -0400
Subject: [PATCH] Show recertification four at a time, two by two

Eight tiles across left each one too narrow to read at floor distance. The row
now shows four per page in a 2x2 block, cycling on the same seven-second timer,
so a name is legible from where people actually stand.

The tiles lay the photo beside the name rather than above it. Two rows of
stacked tiles would roughly double the section's height, and the board is
scaled to fit one screen, so height spent here shrinks everything else. The
photo grows to 120px and the name to 26px in the space that buys.
---
 frontend/src/views/ShopfloorDashboard.vue | 30 ++++++++++++++---------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/ShopfloorDashboard.vue b/frontend/src/views/ShopfloorDashboard.vue
index f98521f..c603555 100644
--- a/frontend/src/views/ShopfloorDashboard.vue
+++ b/frontend/src/views/ShopfloorDashboard.vue
@@ -252,9 +252,10 @@ const recertDescriptions = computed(() => {
   return out
 })
 
-// Recertification shows as a single rotating row: one page of tiles at a time
-// so it stays compact on any screen, cycling through everyone due.
-const RECERT_PAGE_SIZE = 8
+// Recertification shows a rotating 2x2 block: one page of tiles at a time so it
+// stays compact on any screen, cycling through everyone due. Eight across left
+// each tile too narrow to read at floor distance.
+const RECERT_PAGE_SIZE = 4
 const currentRecertPage = ref(0)
 const recertPageCount = computed(() =>
   Math.max(1, Math.ceil(recertifications.value.length / RECERT_PAGE_SIZE))
@@ -577,26 +578,29 @@ function handlePhotoError(e) {
   margin: -4px 0 14px;
   line-height: 1.35;
 }
-/* Single row that cycles through pages of employees */
+/* 2x2 block that cycles through pages of employees */
 .recert-row {
   display: grid;
-  grid-template-columns: repeat(8, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 14px;
 }
 .recert-tile {
   background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%);
   border: 2px solid #0d6efd;
   border-radius: 10px;
-  padding: 14px 10px;
+  padding: 14px 18px;
+  /* Photo beside the name rather than above it: two rows of stacked tiles
+     would double the section's height, and the whole board is scaled to fit
+     one screen, so height here shrinks everything else. */
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 10px;
-  text-align: center;
+  gap: 18px;
+  text-align: left;
 }
 .recert-photo {
-  width: 90px;
-  height: 90px;
+  width: 120px;
+  height: 120px;
+  flex: none;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid #0d6efd;
@@ -608,7 +612,9 @@ function handlePhotoError(e) {
   background: #fff;
 }
 .recert-name {
-  font-size: 20px;
+  flex: 1;
+  min-width: 0;
+  font-size: 26px;
   font-weight: 700;
   line-height: 1.15;
   /* Always reserve two lines so a name that wraps does not make its tile