diff --git a/JournalApp/App.xaml b/JournalApp/App.xaml index ad8dd1e..00d94c1 100644 --- a/JournalApp/App.xaml +++ b/JournalApp/App.xaml @@ -2,6 +2,4 @@ \ 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 bcd90c0..24477a3 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}"> diff --git a/JournalApp/Platforms/Android/MainActivity.cs b/JournalApp/Platforms/Android/MainActivity.cs index b76398f..e97653c 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(); diff --git a/JournalApp/wwwroot/app.css b/JournalApp/wwwroot/app.css index 97ca516..aaadd96 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 47bcf2b..bb44166 100644 --- a/JournalApp/wwwroot/index.html +++ b/JournalApp/wwwroot/index.html @@ -33,6 +33,15 @@