From f667e94bf4d365ea950bd1d4f0cd7fddbb7e0e98 Mon Sep 17 00:00:00 2001
From: Daniel Chalmers <daniel.chalmers@outlook.com>
Date: Sat, 25 Jul 2026 16:10:44 -0500
Subject: [PATCH] Glide dialogs out of the way of the keyboard

The keyboard now overlays the WebView instead of resizing it, and the web layer tracks window.visualViewport to move dialogs clear of it with a smooth transition.
---
 JournalApp/App.xaml                          |  4 +---
 JournalApp/MainPage.xaml                     |  2 +-
 JournalApp/Platforms/Android/MainActivity.cs |  7 +++++++
 JournalApp/wwwroot/app.css                   | 16 ++++++++++++++++
 JournalApp/wwwroot/index.html                |  9 +++++++++
 5 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/JournalApp/App.xaml b/JournalApp/App.xaml
index ad8dd1e1..00d94c11 100644
--- a/JournalApp/App.xaml
+++ b/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"/>
\ No newline at end of file
+             x:Class="JournalApp.App"/>
\ No newline at end of file
diff --git a/JournalApp/MainPage.xaml b/JournalApp/MainPage.xaml
index bcd90c0b..24477a34 100644
--- a/JournalApp/MainPage.xaml
+++ b/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">
diff --git a/JournalApp/Platforms/Android/MainActivity.cs b/JournalApp/Platforms/Android/MainActivity.cs
index b76398fb..e97653c6 100644
--- a/JournalApp/Platforms/Android/MainActivity.cs
+++ b/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>();
diff --git a/JournalApp/wwwroot/app.css b/JournalApp/wwwroot/app.css
index 97ca5161..aaadd964 100644
--- a/JournalApp/wwwroot/app.css
+++ b/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;
diff --git a/JournalApp/wwwroot/index.html b/JournalApp/wwwroot/index.html
index 47bcf2b0..bb441667 100644
--- a/JournalApp/wwwroot/index.html
+++ b/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 });
         }