The bottom bar is cut off by the home indicator in a full-screen shell #46

New Issue

rays · 2026-09-19T16:05:37-07:00

rays commented

2026-09-19 16:05:37 -07:00

The player bar's seek row, and the status bar when no player is open, are clipped along the bottom edge on an iPhone inside the native app. The times and the scrubber are half cut off.

body is a grid of topbar / main / #status / #player, and nothing in the page accounts for the home indicator. Mobile Safari hides that by insetting the layout viewport to the safe area, so the site is fine in a browser -- but a full-screen shell with no browser chrome gives the page the whole display, and the last row lands underneath the indicator.

The fix belongs here rather than in the shell: viewport-fit=cover on the viewport meta, and env(safe-area-inset-*) padding on the bars along the edges. That also fixes the site added to an iOS home screen, which is standalone and has exactly the same problem, and the horizontal insets matter in landscape on a notched phone.

Found while testing the native bridge (#45).

The player bar's seek row, and the status bar when no player is open, are clipped along the bottom edge on an iPhone inside the native app. The times and the scrubber are half cut off. body is a grid of topbar / main / #status / #player, and nothing in the page accounts for the home indicator. Mobile Safari hides that by insetting the layout viewport to the safe area, so the site is fine in a browser -- but a full-screen shell with no browser chrome gives the page the whole display, and the last row lands underneath the indicator. The fix belongs here rather than in the shell: viewport-fit=cover on the viewport meta, and env(safe-area-inset-*) padding on the bars along the edges. That also fixes the site added to an iOS home screen, which is standalone and has exactly the same problem, and the horizontal insets matter in landscape on a notched phone. Found while testing the native bridge (#45).

rays added the bug label 2026-09-19 16:05:37 -07:00

rays referenced this issue from a commit

2026-09-19 16:10:41 -07:00

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

rays commented

2026-09-19 16:10:48 -07:00

Fixed in f9225f0. viewport-fit=cover on the viewport meta, and the bars along the edges now pay for the insets in padding: bottom for the home indicator, left and right for the notch in landscape. A browser with its own chrome reports nought and nothing moves. Only index.html — admin.html has no bar along the bottom and is left inset as it was.

The padding has to be longhand, with a comment saying so: 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 the 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, so buildStyle now fails the build on a calc() run into its neighbour rather than trusting it.

Fixed in f9225f0. `viewport-fit=cover` on the viewport meta, and the bars along the edges now pay for the insets in padding: bottom for the home indicator, left and right for the notch in landscape. A browser with its own chrome reports nought and nothing moves. Only `index.html` — `admin.html` has no bar along the bottom and is left inset as it was. The padding has to be longhand, with a comment saying so: 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 the 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, so `buildStyle` now fails the build on a `calc()` run into its neighbour rather than trusting it.

rays closed this issue

2026-09-19 16:10:48 -07:00

rays referenced this issue from a commit

2026-09-19 16:29:12 -07:00

Release 0.8.4

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: rays/ipodderx-rs#46