Keep the bottom bar clear of the home indicator (#46)

body is a grid of topbar / main / status / player, and nothing in the page
accounted for a display's own intrusions. Mobile Safari hides that by
insetting the layout viewport to the safe area, so the site was fine in a
browser -- but a full-screen shell, the native app or the site added to an
iOS home screen, hands the page the whole display, and the last row landed
under the home indicator with its seek bar and times half cut off.

viewport-fit=cover asks for the whole screen deliberately, and the bars
along the edges now pay for the insets in padding: the bottom for the
indicator, left and right for the notch in landscape. A browser with its
own chrome reports nought and nothing moves.

The padding has to be longhand, and there is a comment saying so, because
the minifier drops the space between a calc() and the value after it in a
shorthand -- padding:7px calc(12px + var(--safe-r))7px ... -- and a browser
then throws the whole declaration away. The bars lost all their padding,
which moved the item list far enough that the pull-to-refresh browser test
stopped finding it; nothing reported an error, and the page still loaded.
buildStyle now fails the build on a calc() run into its neighbour rather
than trusting it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app.css

@@ -500,8 +500,22 @@ a{color:var(--accent)}
 }
 .iconbtn:hover{background:var(--raise);color:var(--fg)}
 /* One toolbar across the window, as the original had: grouped buttons, search on the right. */
+/* The display's own intrusions -- the home indicator along the bottom, the notch at one side in
+   landscape. viewport-fit=cover hands the page the whole screen, which is what a standalone
+   shell and an iOS home-screen app both give it, so the bars along the edges pay for them in
+   padding. A browser with its own chrome reports nought and nothing moves. */
+:root{
+  --safe-b:env(safe-area-inset-bottom,0px);
+  --safe-l:env(safe-area-inset-left,0px);
+  --safe-r:env(safe-area-inset-right,0px);
+}
 #topbar{
-  display:flex;align-items:center;gap:10px;padding:7px 12px;min-width:0;overflow:hidden;
+  display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;
+  /* Longhand, and it has to stay longhand: the minifier runs a calc() in a padding shorthand
+     into the value after it -- `calc(12px + var(--safe-r))7px` -- and the browser then throws
+     the whole declaration away, leaving the bar with no padding at all. */
+  padding-top:7px;padding-bottom:7px;
+  padding-left:calc(12px + var(--safe-l));padding-right:calc(12px + var(--safe-r));
   background:var(--panel);border-bottom:1px solid var(--line);
 }
 #topbar .grow{flex:1}
@@ -830,7 +844,9 @@ body.playing .eq i:nth-child(3){animation-delay:-.6s}
 #player{
   border-top:1px solid var(--line);background:var(--panel);
   display:none;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
-  padding:9px 16px;box-shadow:0 -6px 24px rgba(6,10,16,.4);
+  padding-top:9px;padding-bottom:calc(9px + var(--safe-b));
+  padding-left:calc(16px + var(--safe-l));padding-right:calc(16px + var(--safe-r));
+  box-shadow:0 -6px 24px rgba(6,10,16,.4);
 }
 #player.on{display:grid}
 /* #audio is a <video> playing double duty as the audio element (see its tag). Only a video
@@ -918,9 +934,14 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
 #burger,#dback{display:none}
 /* Totals for what is showing, along the bottom, as the original's status bar. */
 #status{
-  padding:3px 14px;min-height:22px;font-size:12px;color:var(--faint);background:var(--panel);
+  padding-top:3px;padding-bottom:calc(3px + var(--safe-b));
+  padding-left:calc(14px + var(--safe-l));padding-right:calc(14px + var(--safe-r));
+  min-height:22px;font-size:12px;color:var(--faint);background:var(--panel);
   border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 }
+/* Only the last bar along the bottom owes the indicator anything, and with a player open that
+   is the player, not this. Without :has() the worst of it is a gap above the player bar. */
+body:has(#player.on) #status{padding-bottom:3px}
 /* The feed's own header, kept to one line so the table starts high, as it did. */
 .fhead.slim{align-items:center;gap:8px 12px;margin-bottom:10px;flex-wrap:wrap}
 .fhead.slim .art{width:44px;height:44px;font-size:15px;box-shadow:none}
@@ -944,7 +965,11 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
   #sidebar{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:42;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}
   #sidebar.open{transform:none}
   #scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:41}
-  #player{position:relative;z-index:39;padding:7px 10px;gap:8px}
+  #player{
+    position:relative;z-index:39;gap:8px;
+    padding-top:7px;padding-bottom:calc(7px + var(--safe-b));
+    padding-left:calc(10px + var(--safe-l));padding-right:calc(10px + var(--safe-r));
+  }
 
   /* The feed list is reachable whether or not anything is playing. */
   #burger{display:grid}

web/build.mjs

@@ -38,7 +38,14 @@ export function buildStyle({ minify = true } = {}) {
   const r = html.minifySync(`<!doctype html><style>${css}</style>`, { minifyCss: true, removeComments: true });
   const bad = (r.errors || []).filter(e => e.level === 'error' || e.level === 'Error');
   if (bad.length) throw new Error(`${STYLE}: ${bad.map(e => e.message).join('; ')}`);
-  return r.code.slice(r.code.indexOf('<style>') + 7, r.code.lastIndexOf('</style>'));
+  const out = r.code.slice(r.code.indexOf('<style>') + 7, r.code.lastIndexOf('</style>'));
+  // The minifier drops the space between a calc() and the value after it in a shorthand --
+  // `padding:7px calc(12px + var(--safe-r))7px ...` -- and a browser throws the whole
+  // declaration away, so the element silently loses its padding. It reports no error and the
+  // page still loads, which is why this is checked rather than trusted. Longhands avoid it.
+  const run = out.match(/calc\([^()]*(?:\([^()]*\)[^()]*)*\)(?=[0-9a-zA-Z.])/);
+  if (run) throw new Error(`${STYLE}: minifying ran ${run[0]} into the value after it; use longhand properties`);
+  return out;
 }
 
 /// The page and its script, built: { html, js, script }, where script is the file's name.

web/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <meta name="color-scheme" content="dark light">
 <title>iPodderX</title>
 <link rel="icon" type="image/png" sizes="128x128" href="/favicon.png">