Contain tables viewport and critical results

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

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;
+    display: flex;
-    top: calc(var(--shell-header-height) + 1rem);
+    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 {