Skip to content

Android edge-to-edge: embrace SDK 35 enforcement and CSS safe-area insets#2283

Draft
myieye wants to merge 2 commits into
developfrom
fix/android-edge-to-edge
Draft

Android edge-to-edge: embrace SDK 35 enforcement and CSS safe-area insets#2283
myieye wants to merge 2 commits into
developfrom
fix/android-edge-to-edge

Conversation

@myieye
Copy link
Copy Markdown
Collaborator

@myieye myieye commented May 20, 2026

Embrace Android 15+ (SDK 35) edge-to-edge instead of opting out, and add CSS safe-area inset support so the viewer UI clears the status bar and gesture nav bar.

The opt-out style (windowOptOutEdgeToEdgeEnforcement) is deprecated on Android 16+ and was causing env(safe-area-inset-*) to return 0 inside the BlazorWebView; the new AndroidEdgeToEdgeInsets class reads real WindowInsetsCompat values and injects them as CSS custom properties (--safe-area-inset-*) into the WebView.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 20, 2026

Important

Review skipped

Draft detected.

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: cb31265a-aaf4-4922-b0cf-94f1493a115d

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
  • Commit unit tests in branch fix/android-edge-to-edge

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

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

@github-actions github-actions Bot added the 💻 FW Lite issues related to the fw lite application, not miniLcm or crdt related label May 20, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 20, 2026

UI unit Tests

  1 files  ±0   59 suites  ±0   30s ⏱️ +2s
176 tests ±0  176 ✅ ±0  0 💤 ±0  0 ❌ ±0 
245 runs  ±0  245 ✅ ±0  0 💤 ±0  0 ❌ ±0 

Results for commit a26113c. ± Comparison against base commit e362dd4.

♻️ This comment has been updated with latest results.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 20, 2026

C# Unit Tests

165 tests   165 ✅  21s ⏱️
 23 suites    0 💤
  1 files      0 ❌

Results for commit a26113c.

♻️ This comment has been updated with latest results.

@argos-ci
Copy link
Copy Markdown

argos-ci Bot commented May 20, 2026

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ✅ No changes detected - May 20, 2026, 3:37 PM

@myieye myieye marked this pull request as draft May 20, 2026 15:21
myieye and others added 2 commits May 20, 2026 17:32
Android 15 (SDK 35) enforces edge-to-edge layouts and the old
`OptOutEdgeToEdgeEnforcement` attribute in styles-v35 was causing
`env(safe-area-inset-*)` to return 0 inside the BlazorWebView.

Replace the opt-out with a new `AndroidEdgeToEdgeInsets` class that
listens to `WindowInsetsCompat` callbacks and injects the real inset
values as CSS custom properties (`--safe-area-inset-*`) into the
WebView via JavaScript. MainActivity is updated to wire up the listener
instead of relying on the deprecated opt-out style.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add `viewport-fit=cover` to the HTML meta viewport tag so the WebView
renders into the full screen including the notch/status-bar area. Then
apply the `--safe-area-inset-*` CSS custom properties (set by
`AndroidEdgeToEdgeInsets`) throughout the viewer:

- `app.css`: root vars + utility classes for padding/margin insets
- `App.svelte` / `ShadcnProjectView.svelte`: top/bottom padding on
  main content areas
- `sidebar.svelte` / `sidebar-provider.svelte`: fixed positioning
  accounts for top inset so the sidebar doesn't underlap the status bar
- `sonner.svelte`: toaster offset respects bottom inset
- `dialog-content.svelte`, `drawer-content.svelte`,
  `alert-dialog-content.svelte`, `sheet-content.svelte`: overflow and
  padding adjustments so content isn't clipped behind system bars
- `fab-container.svelte`: FAB raised above the bottom nav bar
- `HomeView.svelte`: home view padding

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@myieye myieye force-pushed the fix/android-edge-to-edge branch from 417acf9 to a26113c Compare May 20, 2026 15:33
@myieye myieye changed the title Android edge-to-edge: embrace SDK 35 enforcement, fix WebChromeClient crash, CSS safe-area Android edge-to-edge: embrace SDK 35 enforcement and CSS safe-area insets May 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

💻 FW Lite issues related to the fw lite application, not miniLcm or crdt related

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant