From 49e8528dc6bf93c2eef80c882db5440ee7b62184 Mon Sep 17 00:00:00 2001 From: Frank Tovar Date: Sat, 21 Mar 2026 14:25:56 +0100 Subject: [PATCH] Fix shell omnibox drawer layout --- ...s_frontend_overhaul_implementation_plan.md | 2 ++ .../Components/Primitives/SurfaceDrawer.razor | 16 +++++++++++++++- .../Components/Shell/AppShell.razor.css | 7 +++++++ .../Shell/ShellOmniboxTrigger.razor | 1 + src/RolemasterDb.App/wwwroot/app.css | 19 +++++++++++++++---- 5 files changed, 40 insertions(+), 5 deletions(-) diff --git a/docs/tables_frontend_overhaul_implementation_plan.md b/docs/tables_frontend_overhaul_implementation_plan.md index d5275ca..3e6ea11 100644 --- a/docs/tables_frontend_overhaul_implementation_plan.md +++ b/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 diff --git a/src/RolemasterDb.App/Components/Primitives/SurfaceDrawer.razor b/src/RolemasterDb.App/Components/Primitives/SurfaceDrawer.razor index b9d7268..a303184 100644 --- a/src/RolemasterDb.App/Components/Primitives/SurfaceDrawer.razor +++ b/src/RolemasterDb.App/Components/Primitives/SurfaceDrawer.razor @@ -2,7 +2,7 @@ { @@ -61,6 +61,9 @@ [Parameter] public string? CssClass { get; set; } + [Parameter] + public string? BackdropCssClass { get; set; } + private string BuildCssClass() { var classes = new List { "surface-drawer", $"is-{Placement.Trim().ToLowerInvariant()}" }; @@ -72,6 +75,17 @@ return string.Join(' ', classes); } + private string BuildBackdropCssClass() + { + var classes = new List { "surface-drawer-backdrop" }; + if (!string.IsNullOrWhiteSpace(BackdropCssClass)) + { + classes.Add(BackdropCssClass); + } + + return string.Join(' ', classes); + } + private Task HandleCloseAsync() => OnClose.InvokeAsync(); } diff --git a/src/RolemasterDb.App/Components/Shell/AppShell.razor.css b/src/RolemasterDb.App/Components/Shell/AppShell.razor.css index cb46234..d58916f 100644 --- a/src/RolemasterDb.App/Components/Shell/AppShell.razor.css +++ b/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; } diff --git a/src/RolemasterDb.App/Components/Shell/ShellOmniboxTrigger.razor b/src/RolemasterDb.App/Components/Shell/ShellOmniboxTrigger.razor index 886820a..cd03b91 100644 --- a/src/RolemasterDb.App/Components/Shell/ShellOmniboxTrigger.razor +++ b/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">