Fix Android safe area insets for edge-to-edge display in .NET 10

[Copilot]

Fix seamless status bar and navigation bar on Android (.NET 10)

This PR fixes the issue where the status bar and navigation bar overlay app content without proper safe area handling on Android.

Changes made:

• Enable edge-to-edge mode in MainActivity using WindowCompat.SetDecorFitsSystemWindows
• Create Android styles.xml with transparent status/navigation bars
• Update .page-header to use top: env(safe-area-inset-top) instead of top: 0 to respect safe area
• Remove .status-bar-safe-area div from HTML (no longer needed with CSS env variables)
• Remove .status-bar-safe-area CSS rules (consolidated into page-header)
• Apply safe area insets universally for cross-platform compatibility
• Update .page-body bottom padding to respect bottom safe area insets
• Build successfully

Technical Details:

The key fix was changing .page-header from top: 0 to top: env(safe-area-inset-top). This ensures the sticky header respects the status bar area on Android.

The previous approach using a separate .status-bar-safe-area div didn't work because:

1. It was outside the #app div where Blazor renders
2. The .page-header with position: sticky; top: 0 would stick to the viewport top, ignoring the safe area div

The new approach uses CSS environment variables directly in the page header positioning, which properly accounts for system UI insets on both Android and iOS.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Seamless status bar and navigation bar</issue_title>
<issue_description>On Android, after #73 (.NET 10), the status bar and navigation bar cover the app without a safe area.

We need to ensure proper support for safe areas in MAUI and the Blazor web view.

<agent_instructions>use modern practices for MAUI blazor apps with .NET 10</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Seamless status bar and navigation bar #16

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[danielchalmers]

@copilot Your changes made no difference to the vertical cover. The title (ex: Good Diary) is still covered by the nav bar

[Copilot]

@copilot Your changes made no difference to the vertical cover. The title (ex: Good Diary) is still covered by the nav bar

Fixed in ea3fa67. The issue was that .page-header was using top: 0 which made it stick to the viewport top, ignoring the safe area. Changed it to top: env(safe-area-inset-top) so the header now properly respects the status bar height.

The "Good Diary" title should no longer be covered by the status bar.

[danielchalmers]

Let's wait for the solution to be more publicly known so Copilot knows what to do