Glide dialogs out of the way of the keyboard

JournalApp/App.xaml

@@ -2,6 +2,4 @@
 <Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:JournalApp"
-             x:Class="JournalApp.App"
-             xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
-             android:Application.WindowSoftInputModeAdjust="Resize"/>
+             x:Class="JournalApp.App"/>

JournalApp/MainPage.xaml

@@ -3,7 +3,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:JournalApp"
              x:Class="JournalApp.MainPage"
-             SafeAreaEdges="All"
+             SafeAreaEdges="Container"
              BackgroundColor="{AppThemeBinding Light=#FFF8F9, Dark=#181215}">
 
     <BlazorWebView HostPage="wwwroot/index.html" BlazorWebViewInitialized="OnBlazorWebViewInitialized">

JournalApp/Platforms/Android/MainActivity.cs

@@ -12,6 +12,13 @@ protected override void OnCreate(Bundle savedInstanceState)
     {
         base.OnCreate(savedInstanceState);
 
+        // The web layer dodges the keyboard itself by watching the visual viewport, so keep the window static and let CSS animate the dodge.
+        // Pre-11 WebViews don't track the ime in the visual viewport, so fall back to the legacy resize there.
+        if (OperatingSystem.IsAndroidVersionAtLeast(30))
+            Window.SetSoftInputMode(global::Android.Views.SoftInput.AdjustNothing);
+        else
+            Window.SetSoftInputMode(global::Android.Views.SoftInput.AdjustResize);
+
         var backCallback = new OnBackPressedCallbackProxy(() =>
         {
             var service = IPlatformApplication.Current.Services.GetService<KeyEventService>();

JournalApp/wwwroot/app.css

@@ -306,6 +306,22 @@ label.mud-switch.mud-disabled .mud-switch-span {
   --mud-palette-surface: var(--mud-palette-gray-lighter);
 }
 
+/* The keyboard overlays the WebView and shrinks the visual viewport; pinning the container to it glides dialogs out of the keyboard's way. */
+.mud-dialog-container {
+  height: var(--visible-height, 100%);
+  transition: height 250ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* Cap dialogs to the shrunken container instead of MudBlazor's viewport-based max-height. */
+.mud-dialog:not(.mud-dialog-fullscreen) {
+  max-height: calc(100% - 32px);
+}
+
+/* Give the document scroll room so content can move up out from under the keyboard. */
+body {
+  padding-bottom: var(--keyboard-inset, 0px);
+}
+
 /* M3 dialogs sit on surfaceContainerHigh with the 24px container inset. */
 .mud-dialog {
   padding: 24px !important;

JournalApp/wwwroot/index.html

@@ -33,6 +33,15 @@
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
 
     <script>
+        // The keyboard overlays the page and shrinks the visual viewport; tracking it lets dialogs glide out of the keyboard's way.
+        const viewport = window.visualViewport;
+        const applyViewport = () => {
+            document.documentElement.style.setProperty('--visible-height', viewport.height + 'px');
+            document.documentElement.style.setProperty('--keyboard-inset', Math.max(0, window.innerHeight - viewport.height) + 'px');
+        };
+        viewport.addEventListener('resize', applyViewport);
+        applyViewport();
+
 		window.scrollToAbsoluteTop = (scrollBehavior = 'smooth') => {
             document.scrollingElement.scrollTo({ top: 0, behavior: scrollBehavior });
         }