Fix shell omnibox drawer layout

docs/tables_frontend_overhaul_implementation_plan.md

@@ -58,6 +58,7 @@ It is intentionally implementation-focused:
 | 2026-03-21 | P2.6 | Completed | Replaced the dead shell omnibox trigger with a live drawer-backed omnibox foundation that loads critical tables on demand, filters table search results, surfaces pinned and recent table sections from shared state, and exposes slash-command navigation for the core destinations and tooling routes. |
 | 2026-03-21 | P2.7 | Completed | Added shared frontend primitives for app-bar actions, chips, segmented tabs, drawers, inspector sections, and status indicators, wired the shell omnibox trigger onto the new app-bar action primitive, and switched the new pinned-table labels in `Tables` to the shared status-chip primitive so later page work can build on reusable building blocks instead of fresh ad hoc markup. |
 | 2026-03-21 | P2.8 | Completed | Added a shared `TableContextState` service on top of browser storage and the URL serializer, moved the `Tables` page off page-local table selection persistence, and switched diagnostics to the same restore/persist/build-URI flow so table context logic now lives in shared frontend state instead of being reinvented per page. |
+| 2026-03-21 | Post-P2 fix 1 | Completed | Fixed the shell omnibox drawer regression by adding explicit shell offset variables, constraining drawer/body scrolling, and giving the omnibox its own backdrop geometry so the flyout opens within the visible viewport instead of collapsing into invalid top/bottom positioning. |
 
 ### Lessons Learned
 
@@ -85,6 +86,7 @@ It is intentionally implementation-focused:
 - The serializer alone is not the reusable boundary. The maintainable seam is a shared context-state helper that owns restore, persist, normalization, and URI-building conventions while pages keep only workflow-specific selection logic.
 - Primitive extraction lands best when one or two live consumers adopt the new components immediately. That keeps the foundation honest without forcing a broad page rewrite just to validate the abstraction.
 - The omnibox foundation does not need the full final interaction model to be useful. A drawer with real table search, real pinned/recent data, and a small slash-command set is enough to validate the shell surface before Phase 3 builds deeper index and inspector flows on top of it.
+- Shared overlay primitives should not depend on undeclared layout variables. If a drawer needs shell offsets, the shell must define them explicitly and overlay-specific backdrops should be adjustable instead of assuming full-screen dimming is always correct.
 
 ## Target Outcomes
 

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);
+        top: calc(var(--shell-header-height, 5.1rem) + 0.5rem);
-        bottom: calc(var(--shell-mobile-nav-height) + 0.75rem);
+        bottom: calc(var(--shell-mobile-nav-height, 5.5rem) + 0.5rem);
     }
 }