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.

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;