diff --git a/docs/tables_frontend_overhaul_implementation_plan.md b/docs/tables_frontend_overhaul_implementation_plan.md index 0760a92..3e9675f 100644 --- a/docs/tables_frontend_overhaul_implementation_plan.md +++ b/docs/tables_frontend_overhaul_implementation_plan.md @@ -794,3 +794,9 @@ Start with a narrow but high-leverage slice: 5. extraction of `/tables` shell pieces without yet rewriting every detail of the canvas This sequence reduces risk because it establishes the shared infrastructure before the most complex page rewrite. + +## Post-Plan Adjustments + +- keep `/tables` in a contained-height desktop layout so the rail and table canvas own their own scrolling instead of pushing document scroll +- let `Reading help` consume part of the table-shell height budget instead of extending the page +- preserve the simplified floating cell actions and avoid reintroducing a persistent inspector column diff --git a/src/RolemasterDb.App/wwwroot/app.css b/src/RolemasterDb.App/wwwroot/app.css index 28a3e06..a25e3e9 100644 --- a/src/RolemasterDb.App/wwwroot/app.css +++ b/src/RolemasterDb.App/wwwroot/app.css @@ -520,7 +520,7 @@ select.input-shell { display: flex; flex-direction: column; gap: 0.35rem; - min-height: 100%; + min-height: 0; min-width: 0; max-width: 100%; box-sizing: border-box; @@ -1136,6 +1136,9 @@ select.input-shell { display: flex; flex-direction: column; gap: 1rem; + min-height: 0; + min-width: 0; + overflow: hidden; } .tables-page-header { @@ -1171,12 +1174,14 @@ select.input-shell { display: grid; grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr); gap: 1rem; - align-items: start; + align-items: stretch; + flex: 1 1 auto; + min-height: 0; } .tables-reference-rail { - position: sticky; - top: calc(var(--shell-header-height) + 1rem); + display: flex; + min-height: 0; } .tables-index-rail { @@ -1187,6 +1192,10 @@ select.input-shell { background: var(--surface-card-subtle); border: 1px solid rgba(127, 96, 55, 0.16); box-shadow: 0 16px 26px rgba(41, 22, 11, 0.06); + min-height: 0; + overflow-y: auto; + overscroll-behavior: contain; + scrollbar-gutter: stable; } .tables-index-rail-header { @@ -1362,6 +1371,9 @@ select.input-shell { .tables-reference-main { min-width: 0; + min-height: 0; + display: flex; + flex-direction: column; } .tables-selection-menu { @@ -1423,8 +1435,11 @@ select.input-shell { .table-shell { display: grid; + grid-template-rows: auto minmax(0, 1fr); gap: 0.75rem; + height: 100%; min-height: 0; + overflow: hidden; border-radius: 20px; padding: 1.2rem; background: var(--surface-card-strong); @@ -1537,7 +1552,7 @@ select.input-shell { } .tables-reference-rail { - position: static; + display: block; } .tables-reference-inspector-shell { @@ -1598,10 +1613,17 @@ select.input-shell { } } +@media (min-width: 1024px) { + .tables-page { + block-size: calc(100dvh - var(--shell-header-height, 5.75rem) - var(--shell-mobile-nav-height, 0rem) - 2.25rem); + } +} + .table-shell .table-scroll { overflow: auto; min-width: 0; - max-height: min(72dvh, calc(100dvh - var(--shell-header-height, 5.75rem) - var(--shell-mobile-nav-height, 0rem) - 5rem)); + min-height: 0; + max-height: none; border-radius: 18px; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; @@ -1611,7 +1633,6 @@ select.input-shell { display: grid; align-items: stretch; min-width: 100%; - width: max-content; font-size: 1.5rem; border-top: 1px solid rgba(127, 96, 55, 0.2); border-left: 1px solid rgba(127, 96, 55, 0.2); @@ -1815,11 +1836,13 @@ select.input-shell { } .critical-legend { - margin-top: 1rem; + margin-top: 0; padding: 0.9rem 1rem; border-radius: 16px; background: rgba(235, 226, 209, 0.6); border: 1px solid rgba(127, 96, 55, 0.2); + max-height: min(16rem, 34%); + overflow: auto; } .critical-legend-header {