From d63f49958fd2a750ccc75c7ab2d2c65c59fb8679 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 12 Mar 2026 19:45:10 +0000 Subject: [PATCH 1/3] Initial plan From e89a6c7843d62b5eae476be145a4c7f0dc735b3a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 12 Mar 2026 19:55:04 +0000 Subject: [PATCH 2/3] Fix safe area CSS in Blazor Hybrid templates for Android Remove @supports (-webkit-touch-callout: none) wrapper that prevented safe area CSS rules from applying on Android (Chromium WebView). The env(safe-area-inset-*) values resolve to 0px on platforms that don't need them, so there is no downside to applying them universally. Also update background-color from #f7f7f7 to rgb(3, 23, 62) to match the sidebar theme, and add fallback values to env() functions. Fixes #34462 Co-authored-by: mattleibow <1096616+mattleibow@users.noreply.github.com> --- .../MauiApp.1/wwwroot/app.css | 24 +++++++------------ .../src/templates/maui-blazor/wwwroot/app.css | 24 +++++++------------ 2 files changed, 18 insertions(+), 30 deletions(-) diff --git a/src/Templates/src/templates/maui-blazor-solution/MauiApp.1/wwwroot/app.css b/src/Templates/src/templates/maui-blazor-solution/MauiApp.1/wwwroot/app.css index 4e9b695ea188..18c75687c773 100644 --- a/src/Templates/src/templates/maui-blazor-solution/MauiApp.1/wwwroot/app.css +++ b/src/Templates/src/templates/maui-blazor-solution/MauiApp.1/wwwroot/app.css @@ -1,19 +1,13 @@ .status-bar-safe-area { - display: none; + display: flex; + position: sticky; + top: 0; + height: env(safe-area-inset-top, 0px); + background-color: rgb(3, 23, 62); + width: 100%; + z-index: 1; } -@supports (-webkit-touch-callout: none) { - .status-bar-safe-area { - display: flex; - position: sticky; - top: 0; - height: env(safe-area-inset-top); - background-color: #f7f7f7; - width: 100%; - z-index: 1; - } - - .flex-column, .navbar-brand { - padding-left: env(safe-area-inset-left); - } +.flex-column, .navbar-brand { + padding-left: env(safe-area-inset-left, 0px); } diff --git a/src/Templates/src/templates/maui-blazor/wwwroot/app.css b/src/Templates/src/templates/maui-blazor/wwwroot/app.css index d0824de909ce..10c832a3a9d9 100644 --- a/src/Templates/src/templates/maui-blazor/wwwroot/app.css +++ b/src/Templates/src/templates/maui-blazor/wwwroot/app.css @@ -83,21 +83,15 @@ h1:focus { } .status-bar-safe-area { - display: none; + display: flex; + position: sticky; + top: 0; + height: env(safe-area-inset-top, 0px); + background-color: rgb(3, 23, 62); + width: 100%; + z-index: 1; } -@supports (-webkit-touch-callout: none) { - .status-bar-safe-area { - display: flex; - position: sticky; - top: 0; - height: env(safe-area-inset-top); - background-color: #f7f7f7; - width: 100%; - z-index: 1; - } - - .flex-column, .navbar-brand { - padding-left: env(safe-area-inset-left); - } +.flex-column, .navbar-brand { + padding-left: env(safe-area-inset-left, 0px); } From f08ce9aa77a768473e95eebc16cdaedb11bb4edf Mon Sep 17 00:00:00 2001 From: Copilot <223556219+Copilot@users.noreply.github.com> Date: Tue, 26 May 2026 15:06:51 +0200 Subject: [PATCH 3/3] Fix Blazor template safe area color Keep the sample status bar spacer color scoped to sample content and use a transparent fallback for empty template output. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../maui-blazor-solution/MauiApp.1.Shared/wwwroot/app.css | 1 + .../templates/maui-blazor-solution/MauiApp.1/wwwroot/app.css | 2 +- src/Templates/src/templates/maui-blazor/wwwroot/app.css | 3 ++- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Templates/src/templates/maui-blazor-solution/MauiApp.1.Shared/wwwroot/app.css b/src/Templates/src/templates/maui-blazor-solution/MauiApp.1.Shared/wwwroot/app.css index 3902f865ad3f..a50a8d260220 100644 --- a/src/Templates/src/templates/maui-blazor-solution/MauiApp.1.Shared/wwwroot/app.css +++ b/src/Templates/src/templates/maui-blazor-solution/MauiApp.1.Shared/wwwroot/app.css @@ -1,6 +1,7 @@ /*#if (SampleContent)*/ html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + --maui-status-bar-safe-area-background: rgb(3, 23, 62); } a, .btn-link { diff --git a/src/Templates/src/templates/maui-blazor-solution/MauiApp.1/wwwroot/app.css b/src/Templates/src/templates/maui-blazor-solution/MauiApp.1/wwwroot/app.css index 18c75687c773..4619b5119079 100644 --- a/src/Templates/src/templates/maui-blazor-solution/MauiApp.1/wwwroot/app.css +++ b/src/Templates/src/templates/maui-blazor-solution/MauiApp.1/wwwroot/app.css @@ -3,7 +3,7 @@ position: sticky; top: 0; height: env(safe-area-inset-top, 0px); - background-color: rgb(3, 23, 62); + background-color: var(--maui-status-bar-safe-area-background, transparent); width: 100%; z-index: 1; } diff --git a/src/Templates/src/templates/maui-blazor/wwwroot/app.css b/src/Templates/src/templates/maui-blazor/wwwroot/app.css index 10c832a3a9d9..d69bd2650816 100644 --- a/src/Templates/src/templates/maui-blazor/wwwroot/app.css +++ b/src/Templates/src/templates/maui-blazor/wwwroot/app.css @@ -1,6 +1,7 @@ /*#if (SampleContent)*/ html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + --maui-status-bar-safe-area-background: rgb(3, 23, 62); } a, .btn-link { @@ -87,7 +88,7 @@ h1:focus { position: sticky; top: 0; height: env(safe-area-inset-top, 0px); - background-color: rgb(3, 23, 62); + background-color: var(--maui-status-bar-safe-area-background, transparent); width: 100%; z-index: 1; }