From 536a8f0825a8008674de74f91f14733fae773378 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Fri, 7 Aug 2026 08:38:55 -0400
Subject: [PATCH] Centre the parts kiosk on the screen instead of hugging the
 top

The kiosk runs full-screen on a wall-mounted display, where the interface sat
against the top edge with the rest of the screen empty below it. It now
centres as one block, vertically and horizontally.

The title was the other half of it: the header was space-between, which reads
as centred only on the steps that show the Start over button. On the first
step, with no button to balance it, the title sat alone at the left edge of
the column. The title is centred and Start over is taken out of the flow so it
keeps its corner without shifting the title on the steps that have it.

Centring uses `safe center`, with plain `center` as the fallback line. On a
screen too short for the content, plain `center` overflows in both directions
and the header ends up above the scroll origin, unreachable. `safe` falls back
to top-aligned there and the page scrolls normally.
---
 .../printedparts/frontend/views/PartsKiosk.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/plugins/printedparts/frontend/views/PartsKiosk.vue b/plugins/printedparts/frontend/views/PartsKiosk.vue
index df0fff1..d161083 100644
--- a/plugins/printedparts/frontend/views/PartsKiosk.vue
+++ b/plugins/printedparts/frontend/views/PartsKiosk.vue
@@ -222,14 +222,30 @@ function reset() {
   display: flex;
   flex-direction: column;
   align-items: center;
+  /* Centered as one block on the wall-mounted display, not hugging the top.
+     `safe` so a short screen (or a tall error + item card) scrolls from the
+     top instead of clipping the header off the edge, which plain `center`
+     does with no way to scroll back up. */
+  justify-content: center;
+  justify-content: safe center;
   gap: 1.5rem;
 }
 .kiosk-header {
   width: 100%;
   max-width: 40rem;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
+  /* Title sits centered over the panel; Start over is pulled out of the flow
+     so it keeps its top-right corner instead of pushing the title off-center
+     on the steps that show it. */
+  position: relative;
+}
+.kiosk-header .btn {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
 }
 .kiosk-step {
   display: flex;