merge develop into main

assets/css/style.css

@@ -137,22 +137,29 @@ body {
     z-index: 1;
 }
 
-/* Title wrap — absolutely centered in the full header width */
+/* Title wrap — left-aligned by default; centered in kiosk mode */
 .header-title-wrap {
-    position: absolute;
+    flex: 1 1 0;
-    left: 0;
-    right: 0;
     display: flex;
-    justify-content: center;
     align-items: center;
     gap: 8px;
-    pointer-events: none;
+    min-width: 0;
     overflow: hidden;
 }
 .header-title-wrap > * {
     pointer-events: auto;
 }
 
+/* Kiosk mode: center title absolutely across full header width */
+.kiosk-mode .header-title-wrap {
+    position: absolute;
+    left: 0;
+    right: 0;
+    flex: unset;
+    justify-content: center;
+    pointer-events: none;
+}
+
 .header-title {
     font-size: 1.3rem;
     font-weight: 700;

assets/js/app.js

@@ -2027,6 +2027,10 @@ function _injectKioskOverlay() {
     if (typeof _kioskBridge === 'undefined') return;
     if (document.getElementById('_kiosk_overlay')) return;
 
+    // Mark header so CSS can center the title
+    const appHeader = document.querySelector('.app-header');
+    if (appHeader) appHeader.classList.add('kiosk-mode');
+
     const headerLeft = document.getElementById('header-left');
     if (!headerLeft) return;