fix: keep iPad PWA in standalone mode

[gigq]

What Changed

Improves the iPad/iOS PWA shell so the app stays in standalone mode more reliably and does not expose Safari chrome during normal use.

This change:

• adds a manifest.webmanifest with display: "standalone"
• adds the Apple/mobile web app meta tags in index.html
• updates the viewport meta to use viewport-fit=cover
• pins the root app shell to 100dvh in standalone/fullscreen display modes and fixes the body to the viewport in that mode

Why

On iPadOS, the installed PWA could still reveal browser chrome during scroll or certain interactions, which breaks the standalone-app feel.

This approach keeps the fix focused at the app-shell level instead of changing individual screens:

• it makes the app explicitly installable as a standalone web app
• it enables the Apple-specific standalone behavior Safari expects
• it constrains the root layout only when the app is actually running in standalone/fullscreen mode

UI Changes

Behavior change only. In installed PWA mode on iPad/iOS, the app shell should remain in standalone presentation more consistently instead of allowing Safari chrome to appear.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Before:

After:

---

Note

Low Risk
Low risk: changes are limited to PWA metadata and CSS app-shell sizing/scroll behavior, with the main risk being unintended layout/scroll regressions in standalone/fullscreen modes.

Overview
Improves iPad/iOS installed-PWA behavior by making the app explicitly standalone-capable and reducing cases where Safari chrome appears.

Adds a manifest.webmanifest (with display: "standalone") and wires it up via new mobile/Apple meta tags (including viewport-fit=cover) in index.html. Updates the global shell CSS to use 100dvh and fix the body to the viewport only in standalone/fullscreen display modes, preventing overscroll/scroll-induced chrome.

^{Written by Cursor Bugbot for commit 00c4f3e. This will update automatically on new commits. Configure here.}

Note

Keep iPad PWA running in standalone mode

• Adds a web app manifest defining name, icons, colors, and display: standalone so browsers can install the app correctly.
• Adds Apple PWA meta tags to index.html (apple-mobile-web-app-capable, status bar style, title) to keep the app in standalone mode on iOS/iPadOS.
• Updates index.css with a display-mode: standalone media query that locks the body to the full dynamic viewport height and disables scroll bounce.
• Updates the viewport meta to include viewport-fit=cover so content extends into safe areas on notched devices.

^{Macroscope summarized 00c4f3e.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 8fa31300-2487-4a9e-951b-cd2dcc75e4ad

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[cursor]

viewport-fit=cover added without safe area inset padding

Medium Severity

Adding viewport-fit=cover tells the browser to extend the layout viewport into device safe areas (home indicator, rounded corners), but no env(safe-area-inset-*) padding is applied anywhere in the app's CSS. Previously, without viewport-fit=cover, the browser automatically constrained the viewport to avoid these regions. Now content at the screen edges—especially the bottom home indicator area on modern iPads—can be obscured or hard to interact with in standalone mode.

Additional Locations (1)

• apps/web/src/index.css#L148-L163