* fix(ui): keep PWA dialogs visible on Android
The PWA dialog adjustments under
@media (display-mode: standalone) and (max-width: 768px) were originally
written to clear the iOS status bar / notch by adding a top offset and a
translateY override. The rule was not scoped to iOS, so Android PWAs
matched it too:
- The extra top: 50% + (safe-area-top * 0.22) plus
--tw-translate-y: -50% + (safe-area-top * 0.6) pushed the dialog
below the visible center on Android, where the parent already centers
the popup via flex items-center justify-center on Base UI's portal.
- max-height was computed against 100vh. Android Chrome's collapsible
URL bar makes 100vh larger than the visible viewport, so when the
bar is shown the dialog's action buttons can be pushed off-screen
(for example the Install button in the Skills install dialog).
Fix:
- Use 100dvh (with the existing safe-area subtractions) so max-height
tracks the dynamic visible viewport on Android.
- Move the top / --tw-translate-y override into
@supports (-webkit-touch-callout: none) so it only applies on iOS,
where it was always intended.
Verified by rebuilding packages/web and inspecting the emitted CSS:
the common .pwa-dialog-content rule now ships with max-height using
100dvh and no top/translate overrides; the iOS-only block keeps the
original offsets.
Tested manually on Android Chrome PWA against
https://aion.xsim.uk: 'About OpenChamber' and 'Install skill' dialogs
now center vertically and their footer buttons stay on-screen as the
URL bar collapses/expands.
* fix(ui): restore vh fallback for PWA dialog max-height
Address review feedback on #1370: the previous patch dropped the
original `max-height: calc(100vh - ...)` line entirely and only kept
`100dvh`. On browsers that do not understand the `dvh` unit the
declaration is invalid and dropped, which would leave the dialog
without any `max-height` cap inside this media block — potentially
worse than before the fix.
Reinstate the canonical progressive-enhancement pattern: ship the
`100vh` declaration first so older engines have a usable value, then
override with `100dvh` on the next line for browsers that do support
it. New comment makes the two-line pattern explicit so it isn't pruned
again as accidental duplication.
Verified via `packages/web` build: the emitted CSS now contains both
declarations in order on the shared `.pwa-dialog-content` rule:
max-height: calc(100vh - ...);
max-height: calc(100dvh - ...);
`type-check` and `lint` in `packages/ui` remain clean.
---------
Co-authored-by: lilyzhaun <lilyzhaun@users.noreply.github.com>
