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;