From 8a3aedb0e77ab056ad87bc6b1e37ce4f2de41a7a Mon Sep 17 00:00:00 2001 From: marwin Date: Sun, 5 Apr 2026 17:54:00 +0200 Subject: [PATCH] Use Window Controls Overlay for Chrome PWA titlebar Adds display_override: window-controls-overlay to the manifest so the app extends into the titlebar area. The navbar becomes draggable and uses env(titlebar-area-*) to avoid the window controls buttons. Interactive elements stay clickable via -webkit-app-region: no-drag. Co-Authored-By: Claude Sonnet 4.6 --- static/css/app.css | 8 ++++++++ static/manifest.json | 1 + 2 files changed, 9 insertions(+) diff --git a/static/css/app.css b/static/css/app.css index 7429252..c331e62 100644 --- a/static/css/app.css +++ b/static/css/app.css @@ -98,6 +98,14 @@ a:hover { padding: 0 1.5rem; background: var(--bg); border-bottom: 1px solid var(--border); + /* Window Controls Overlay: extend navbar into the titlebar area */ + padding-left: max(1.5rem, env(titlebar-area-x, 1.5rem)); + padding-top: env(titlebar-area-y, 0); + height: calc(var(--nav-h) + env(titlebar-area-y, 0px)); + -webkit-app-region: drag; +} +.navbar a, .navbar button, .navbar input, .navbar form { + -webkit-app-region: no-drag; } .navbar-brand { diff --git a/static/manifest.json b/static/manifest.json index cf770cd..696ba46 100644 --- a/static/manifest.json +++ b/static/manifest.json @@ -4,6 +4,7 @@ "description": "Internet radio player", "start_url": "/", "display": "standalone", + "display_override": ["window-controls-overlay", "standalone"], "background_color": "#000000", "theme_color": "#000000", "orientation": "any",