Tighten critical editor popup interactions

src/RolemasterDb.App/Components/Shared/CriticalCellEditorDialog.razor

@@ -2,11 +2,23 @@
 @using System.Collections.Generic
 @using System.Linq
 @using System.Text.Json
+@using Microsoft.JSInterop
 @using RolemasterDb.App.Domain
 @using RolemasterDb.App.Features
+@implements IAsyncDisposable
+@inject IJSRuntime JSRuntime
 
-<div class="critical-editor-backdrop" @onclick="HandleBackdropClicked">
-    <div class="critical-editor-dialog" @onclick:stopPropagation="true">
+<div class="critical-editor-backdrop"
+     @onpointerdown="HandleBackdropPointerDown"
+     @onpointerup="HandleBackdropPointerUp"
+     @onpointercancel="HandleBackdropPointerCancel">
+    <div class="critical-editor-dialog"
+         @onpointerdown="HandleDialogPointerDown"
+         @onpointerup="HandleDialogPointerUp"
+         @onpointercancel="HandleDialogPointerCancel"
+         @onpointerdown:stopPropagation="true"
+         @onpointerup:stopPropagation="true"
+         @onpointercancel:stopPropagation="true">
         <header class="critical-editor-header">
             <div>
                 @if (Model is not null)
@@ -359,12 +371,76 @@
     {
         WriteIndented = true
     };
+    private IJSObjectReference? jsModule;
+    private bool isBackdropPointerDown;
 
-    private async Task HandleBackdropClicked()
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        if (!firstRender)
+        {
+            return;
+        }
+
+        jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>(
+            "import",
+            "./Components/Shared/CriticalCellEditorDialog.razor.js");
+
+        await jsModule.InvokeVoidAsync("lockBackgroundScroll");
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (jsModule is null)
+        {
+            return;
+        }
+
+        try
+        {
+            await jsModule.InvokeVoidAsync("unlockBackgroundScroll");
+            await jsModule.DisposeAsync();
+        }
+        catch (JSDisconnectedException)
+        {
+        }
+    }
+
+    private void HandleBackdropPointerDown()
+    {
+        isBackdropPointerDown = true;
+    }
+
+    private async Task HandleBackdropPointerUp()
+    {
+        if (!isBackdropPointerDown)
+        {
+            return;
+        }
+
+        isBackdropPointerDown = false;
         await OnClose.InvokeAsync();
     }
 
+    private void HandleBackdropPointerCancel()
+    {
+        isBackdropPointerDown = false;
+    }
+
+    private void HandleDialogPointerDown()
+    {
+        isBackdropPointerDown = false;
+    }
+
+    private void HandleDialogPointerUp()
+    {
+        isBackdropPointerDown = false;
+    }
+
+    private void HandleDialogPointerCancel()
+    {
+        isBackdropPointerDown = false;
+    }
+
     private async Task HandleSubmitAsync(EditContext _)
     {
         await OnSave.InvokeAsync();

src/RolemasterDb.App/Components/Shared/CriticalCellEditorDialog.razor.js

@@ -0,0 +1,26 @@
+const scrollLockClassName = "critical-editor-scroll-locked";
+let scrollLockCount = 0;
+
+export function lockBackgroundScroll() {
+    scrollLockCount++;
+    if (scrollLockCount !== 1) {
+        return;
+    }
+
+    document.documentElement.classList.add(scrollLockClassName);
+    document.body.classList.add(scrollLockClassName);
+}
+
+export function unlockBackgroundScroll() {
+    if (scrollLockCount === 0) {
+        return;
+    }
+
+    scrollLockCount--;
+    if (scrollLockCount !== 0) {
+        return;
+    }
+
+    document.documentElement.classList.remove(scrollLockClassName);
+    document.body.classList.remove(scrollLockClassName);
+}

src/RolemasterDb.App/wwwroot/app.css

@@ -26,6 +26,15 @@ body {
     margin: 0;
 }
 
+html.critical-editor-scroll-locked,
+body.critical-editor-scroll-locked {
+    overflow: hidden;
+}
+
+body.critical-editor-scroll-locked {
+    overscroll-behavior: none;
+}
+
 h1,
 h2,
 h3,