martin/musicmouse
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Phone layout: opaque status bar and one safe-area rule for every edge

Browse Source 
Each fix to the home-screen app's layout on iOS broke something else, and they
all traced back to black-translucent: it runs the page under the clock, so any
top-anchored control without its own inset sat behind it (the play view's back
button), and since iOS 26 it sizes the app one status bar short with a strip at
the bottom that CSS cannot paint (WebKit 301108). The status bar is opaque now
("black"), the page starts below it, and lib/fullHeight.ts - the JS workaround
for the short viewport - is gone with the CSS that depended on it.

viewport-fit=cover stays, so everything against a screen edge now adds that
edge's inset from shared --safe-* variables: the corner back button, the
remote-assign button, the assign toast, the tool buttons and the tab rail did
not before. The rules are written down under "Layout on phones" in the README.

On a phone held sideways the mini player and the tabs share one row instead of
taking half the screen.

Home-screen installs read the status-bar tag once: remove and re-add the app.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Martin Bauer
2026-10-04 10:46:06 +02:00
parent 34f2f016f9
commit 4428357e13
16 changed files with 115 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/index.html
View File

@@ -2,7 +2,8 @@
<html lang="de">
<head>
<meta charset="utf-8" />
<!-- viewport-fit=cover so the sea reaches under the iPhone's rounded corners;
<!-- viewport-fit=cover so the sea reaches under the rounded corners and the home
indicator - edge-anchored elements clear them with the --safe-* insets;
user-scalable=no because a pinch-zoom on a big pink play button is a misfire. -->
<meta
name="viewport"
@@ -18,8 +19,13 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Musik" />
<!-- black-translucent lets the page's own gradient run behind the status bar. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- An opaque status bar, so the page starts below it - not black-translucent. That
one ran the page under the clock, which put every top-anchored control behind
it unless each remembered its inset, and since iOS 26 it also sizes the app one
status bar short with an unpaintable strip at the bottom (WebKit bug 301108).
See "Layout on phones" in README.md. Home-screen installs read this tag once:
remove and re-add the app after changing it. -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="icon" href="/icon-192.png" type="image/png" />
<link rel="stylesheet" href="/fonts/nunito.css" />