Fix shell omnibox drawer layout

src/RolemasterDb.App/Components/Primitives/SurfaceDrawer.razor

@@ -2,7 +2,7 @@
 {
     <button
         type="button"
-        class="surface-drawer-backdrop"
+        class="@BuildBackdropCssClass()"
         aria-label="@CloseLabel"
         @onclick="HandleCloseAsync"></button>
 
@@ -61,6 +61,9 @@
     [Parameter]
     public string? CssClass { get; set; }
 
+    [Parameter]
+    public string? BackdropCssClass { get; set; }
+
     private string BuildCssClass()
     {
         var classes = new List<string> { "surface-drawer", $"is-{Placement.Trim().ToLowerInvariant()}" };
@@ -72,6 +75,17 @@
         return string.Join(' ', classes);
     }
 
+    private string BuildBackdropCssClass()
+    {
+        var classes = new List<string> { "surface-drawer-backdrop" };
+        if (!string.IsNullOrWhiteSpace(BackdropCssClass))
+        {
+            classes.Add(BackdropCssClass);
+        }
+
+        return string.Join(' ', classes);
+    }
+
     private Task HandleCloseAsync() =>
         OnClose.InvokeAsync();
 }

src/RolemasterDb.App/Components/Shell/AppShell.razor.css

@@ -1,4 +1,6 @@
 .app-shell {
+    --shell-header-height: 5.75rem;
+    --shell-mobile-nav-height: 0rem;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
@@ -200,6 +202,11 @@
 }
 
 @media (max-width: 767.98px) {
+    .app-shell {
+        --shell-header-height: 5.1rem;
+        --shell-mobile-nav-height: 5.5rem;
+    }
+
     .app-shell-header {
         padding: 0.65rem 0.75rem 0;
     }

src/RolemasterDb.App/Components/Shell/ShellOmniboxTrigger.razor

@@ -16,6 +16,7 @@
     Title="Search tables and commands"
     AriaLabel="Search tables and commands"
     CssClass="shell-omnibox-drawer"
+    BackdropCssClass="shell-omnibox-backdrop"
     OnClose="CloseAsync">
     <div class="shell-omnibox-panel">
         <label class="shell-omnibox-search">

src/RolemasterDb.App/wwwroot/app.css

@@ -908,14 +908,16 @@ pre,
     position: fixed;
     z-index: 95;
     display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
     gap: 1rem;
     border: 1px solid var(--border-subtle);
     background: var(--surface-elevated);
     box-shadow: 0 24px 54px -28px var(--shadow-strong);
+    overflow: hidden;
 }
 
 .surface-drawer.is-end {
-    top: calc(var(--shell-header-height) + 1rem);
+    top: calc(var(--shell-header-height, 5.75rem) + 1rem);
     right: 1rem;
     bottom: 1rem;
     width: min(24rem, calc(100vw - 2rem));
@@ -924,7 +926,7 @@ pre,
 
 .surface-drawer.is-bottom {
     right: 0.75rem;
-    bottom: calc(var(--shell-mobile-nav-height) + 0.75rem);
+    bottom: calc(var(--shell-mobile-nav-height, 0rem) + 0.75rem);
     left: 0.75rem;
     max-height: min(70vh, 36rem);
     border-radius: 1.25rem 1.25rem 0 0;
@@ -951,17 +953,26 @@ pre,
 .surface-drawer-body {
     display: grid;
     gap: 1rem;
+    min-height: 0;
     padding: 0 1rem 1rem;
     overflow: auto;
 }
 
+.shell-omnibox-backdrop.surface-drawer-backdrop {
+    top: calc(var(--shell-header-height, 5.75rem) + 0.5rem);
+    bottom: calc(var(--shell-mobile-nav-height, 0rem) + 0rem);
+}
+
 .shell-omnibox-drawer.surface-drawer.is-end {
+    top: calc(var(--shell-header-height, 5.75rem) + 0.75rem);
+    bottom: 1rem;
     width: min(34rem, calc(100vw - 2rem));
 }
 
 .shell-omnibox-panel {
     display: grid;
     gap: 1rem;
+    min-height: 0;
 }
 
 .shell-omnibox-search {
@@ -2060,7 +2071,7 @@ pre,
         right: 0.75rem;
         left: 0.75rem;
         width: auto;
-        top: calc(var(--shell-header-height) + 0.75rem);
-        bottom: calc(var(--shell-mobile-nav-height) + 0.75rem);
+        top: calc(var(--shell-header-height, 5.1rem) + 0.5rem);
+        bottom: calc(var(--shell-mobile-nav-height, 5.5rem) + 0.5rem);
     }
 }