diff --git a/assets/css/style.css b/assets/css/style.css
index 00dd8aa..23ce07e 100644
--- a/assets/css/style.css
+++ b/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;
-    left: 0;
-    right: 0;
+    flex: 1 1 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;
diff --git a/assets/js/app.js b/assets/js/app.js
index 25e563f..f9e0a4c 100644
--- a/assets/js/app.js
+++ b/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;