From 380945d2531b9edeb5b429bf76673272bfa7991c Mon Sep 17 00:00:00 2001
From: Frank Tovar <mail@franktovar.de>
Date: Sat, 21 Mar 2026 12:01:15 +0100
Subject: [PATCH] Flatten critical tables into a shared grid

---
 .../Components/Pages/Tables.razor             | 65 +++++++++----------
 src/RolemasterDb.App/wwwroot/app.css          | 11 ++--
 src/RolemasterDb.App/wwwroot/tables.js        |  4 +-
 3 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/src/RolemasterDb.App/Components/Pages/Tables.razor b/src/RolemasterDb.App/Components/Pages/Tables.razor
index 0850136..20c5e7c 100644
--- a/src/RolemasterDb.App/Components/Pages/Tables.razor
+++ b/src/RolemasterDb.App/Components/Pages/Tables.razor
@@ -103,49 +103,42 @@
             }
 
             <div class="table-scroll">
-                <div class="critical-table-grid" role="table" aria-label="@detail.DisplayName">
+                <div class="critical-table-grid" role="group" aria-label="@detail.DisplayName" style="@gridTemplateStyle">
                     @if (detail.Groups.Count > 0)
                     {
-                        <div class="critical-table-grid-row critical-table-grid-group-row" role="row" style="@gridTemplateStyle">
-                            <div class="critical-table-grid-header-cell critical-table-grid-corner" aria-hidden="true"></div>
-                            @foreach (var group in detail.Groups)
-                            {
-                                <div
-                                    class="critical-table-grid-header-cell critical-table-grid-group-header"
-                                    role="columnheader"
-                                    style="@BuildColumnSpanStyle(detail.Columns.Count)">
-                                    <span>@group.Label</span>
-                                </div>
-                            }
+                        <div class="critical-table-grid-header-cell critical-table-grid-corner" aria-hidden="true"></div>
+                        @foreach (var group in detail.Groups)
+                        {
+                            <div
+                                class="critical-table-grid-header-cell critical-table-grid-group-header"
+                                style="@BuildColumnSpanStyle(detail.Columns.Count)">
+                                <span>@group.Label</span>
+                            </div>
+                        }
+                    }
+
+                    <div class="critical-table-grid-header-cell critical-table-grid-roll-band-header" aria-hidden="true"></div>
+                    @foreach (var displayColumn in displayColumns)
+                    {
+                        <div class="critical-table-grid-header-cell critical-table-grid-column-header">
+                            <span>@displayColumn.ColumnLabel</span>
                         </div>
                     }
 
-                    <div class="critical-table-grid-row critical-table-grid-column-row" role="row" style="@gridTemplateStyle">
-                        <div class="critical-table-grid-header-cell critical-table-grid-roll-band-header" aria-hidden="true"></div>
-                        @foreach (var displayColumn in displayColumns)
-                        {
-                            <div class="critical-table-grid-header-cell critical-table-grid-column-header" role="columnheader">
-                                <span>@displayColumn.ColumnLabel</span>
-                            </div>
-                        }
-                    </div>
-
                     @foreach (var rollBand in detail.RollBands)
                     {
-                        <div class="critical-table-grid-row critical-table-grid-body-row" role="row" style="@gridTemplateStyle">
-                            <div class="critical-table-grid-header-cell critical-table-grid-roll-band" role="rowheader">@rollBand.Label</div>
-                            @foreach (var displayColumn in displayColumns)
+                        <div class="critical-table-grid-header-cell critical-table-grid-roll-band">@rollBand.Label</div>
+                        @foreach (var displayColumn in displayColumns)
+                        {
+                            @if (TryGetCell(rollBand.Label, displayColumn.GroupKey, displayColumn.ColumnKey, out var cell))
                             {
-                                @if (TryGetCell(rollBand.Label, displayColumn.GroupKey, displayColumn.ColumnKey, out var cell))
-                                {
-                                    @RenderCriticalTableCell(cell)
-                                }
-                                else
-                                {
-                                    @RenderEmptyCriticalTableCell()
-                                }
+                                @RenderCriticalTableCell(cell)
                             }
-                        </div>
+                            else
+                            {
+                                @RenderEmptyCriticalTableCell()
+                            }
+                        }
                     }
                 </div>
             </div>
@@ -789,7 +782,7 @@
         return string.Join(' ', classes);
     }
 
-    private RenderFragment RenderCriticalTableCell(CriticalTableCellDetail cell) => @<div class="@GetCellCssClass(cell)" role="cell">
+    private RenderFragment RenderCriticalTableCell(CriticalTableCellDetail cell) => @<div class="@GetCellCssClass(cell)">
         <div class="critical-table-cell-shell">
             <div class="critical-table-cell-actions">
                 @if (cell.IsCurated)
@@ -823,7 +816,7 @@
         </div>
     </div>;
 
-    private static RenderFragment RenderEmptyCriticalTableCell() => @<div class="critical-table-cell critical-table-cell-empty" role="cell">
+    private static RenderFragment RenderEmptyCriticalTableCell() => @<div class="critical-table-cell critical-table-cell-empty">
         <span class="empty-cell">—</span>
     </div>;
 }
diff --git a/src/RolemasterDb.App/wwwroot/app.css b/src/RolemasterDb.App/wwwroot/app.css
index 7b973e8..f4dc31f 100644
--- a/src/RolemasterDb.App/wwwroot/app.css
+++ b/src/RolemasterDb.App/wwwroot/app.css
@@ -738,6 +738,8 @@ textarea {
 }
 
 .critical-table-grid {
+    display: grid;
+    align-items: stretch;
     width: 100%;
     min-width: max-content;
     font-size: 1.5rem;
@@ -745,11 +747,6 @@ textarea {
     border-left: 1px solid rgba(127, 96, 55, 0.2);
 }
 
-.critical-table-grid-row {
-    display: grid;
-    align-items: stretch;
-}
-
 .critical-table-grid-header-cell {
     display: flex;
     align-items: center;
@@ -765,8 +762,8 @@ textarea {
     box-sizing: border-box;
 }
 
-.critical-table-grid-column-row .critical-table-grid-header-cell,
-.critical-table-grid-group-row .critical-table-grid-header-cell {
+.critical-table-grid-group-header,
+.critical-table-grid-column-header {
     font-size: 2rem;
 }
 
diff --git a/src/RolemasterDb.App/wwwroot/tables.js b/src/RolemasterDb.App/wwwroot/tables.js
index f0bb29b..6f6a68f 100644
--- a/src/RolemasterDb.App/wwwroot/tables.js
+++ b/src/RolemasterDb.App/wwwroot/tables.js
@@ -1,3 +1 @@
-window.rolemasterTables = window.rolemasterTables || {
-    alignCriticalCells() {}
-};
+// Intentionally empty: the tables layout is fully CSS-driven.