Improve critical table browsing UX

docs/player_gm_ux_redesign_plan.md

@@ -516,6 +516,10 @@ Acceptance criteria:
 
 ### Phase 2: Clean up critical table browsing
 
+Status:
+
+- implemented in the web app on March 15, 2026
+
 Scope:
 
 - reframe tables page around reading and selecting outcomes

src/RolemasterDb.App/Components/Pages/Tables.razor

@@ -9,8 +9,9 @@
 <PageTitle>Critical Tables</PageTitle>
 
 <section class="panel tables-page">
+    <div class="table-browser-toolbar">
         <div class="table-selector">
-        <label for="critical-table-select">Critical table</label>
+            <label for="critical-table-select">Table</label>
             <select
                 id="critical-table-select"
                 class="input-shell"
@@ -31,9 +32,12 @@
             </select>
         </div>
 
+        <p class="table-browser-toolbar-copy">Choose a table, then read from the roll band on the left across to the result you need.</p>
+    </div>
+
     @if (referenceData is null)
     {
-        <p class="muted">Loading reference data...</p>
+        <p class="muted">Loading table list...</p>
     }
     else if (!referenceData.CriticalTables.Any())
     {
@@ -53,9 +57,17 @@
     }
     else if (tableDetail is { } detail)
     {
+        var readingHint = detail.Groups.Count > 0
+            ? "Find the roll band on the left, then read across to the group and severity you need."
+            : "Find the roll band on the left, then read across to the severity you need.";
+
         <div class="table-shell">
-            <header>
+            <header class="table-browser-header">
+                <div>
                     <h2 class="panel-title">@detail.DisplayName</h2>
+                    <p class="table-browser-reading-hint">@readingHint</p>
+                </div>
+                <p class="table-browser-edit-hint">Click any filled result to correct it.</p>
             </header>
 
             <div class="table-scroll">
@@ -168,7 +180,10 @@
             @if (legendEntries.Count > 0)
             {
                 <div class="critical-legend">
-                    <h4>Affix legend</h4>
+                    <div class="critical-legend-header">
+                        <h4>Reading help</h4>
+                        <p class="muted">These symbols show the effects attached to a result at a glance.</p>
+                    </div>
                     <div class="legend-grid">
                         @foreach (var entry in legendEntries)
                         {

src/RolemasterDb.App/Components/Shared/CompactCriticalCell.razor

@@ -7,6 +7,9 @@
         <p class="critical-cell-description">@Description</p>
     }
 
+    @if ((Effects?.Count ?? 0) > 0 || (Branches?.Count ?? 0) > 0)
+    {
+        <div class="critical-cell-footer">
             <AffixBadgeList Effects="Effects" />
 
             @if (Branches?.Count > 0)
@@ -28,6 +31,8 @@
                 </div>
             }
         </div>
+    }
+</div>
 
 @code {
     [Parameter, EditorRequired]

src/RolemasterDb.App/wwwroot/app.css

@@ -269,19 +269,27 @@ textarea {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
+    min-height: 100%;
+}
+
+.critical-cell-footer {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
 }
 
 .critical-cell-description {
     margin: 0;
     color: #2c1a10;
-    font-size: 1.2rem;
+    font-size: 1rem;
+    line-height: 1.4;
 }
 
 .critical-branch-stack {
     display: flex;
     flex-direction: column;
     gap: 0.4rem;
-    margin-top: 0.65rem;
 }
 
 .critical-branch-card {
@@ -302,6 +310,7 @@ textarea {
 .critical-branch-description {
     margin: 0.3rem 0 0.45rem;
     font-size: 0.85rem;
+    line-height: 1.35;
     color: #3b2a21;
 }
 
@@ -462,12 +471,24 @@ textarea {
     gap: 1rem;
 }
 
+.table-browser-toolbar {
+    display: grid;
+    gap: 0.85rem;
+}
+
 .table-selector {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
 }
 
+.table-browser-toolbar-copy,
+.table-browser-reading-hint,
+.table-browser-edit-hint {
+    margin: 0;
+    color: var(--ink-soft);
+}
+
 .table-shell {
     border-radius: 20px;
     padding: 1.2rem;
@@ -476,11 +497,20 @@ textarea {
     box-shadow: 0 18px 30px rgba(41, 22, 11, 0.08);
 }
 
-.table-shell header {
+.table-browser-header {
     display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    margin-bottom: 0.85rem;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.table-browser-reading-hint {
+    margin-top: 0.2rem;
+}
+
+.table-browser-edit-hint {
+    white-space: nowrap;
 }
 
 .table-shell .table-scroll {
@@ -490,13 +520,13 @@ textarea {
 .critical-table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 0.85rem;
+    font-size: 0.8rem;
 }
 
 .critical-table th,
 .critical-table td {
     border: 1px solid rgba(127, 96, 55, 0.2);
-    padding: 0.45rem;
+    padding: 0.35rem;
     vertical-align: top;
 }
 
@@ -505,12 +535,13 @@ textarea {
     text-transform: uppercase;
     text-align: center;
     vertical-align: middle;
+    letter-spacing: 0.08em;
 }
 
 .critical-table td {
     background: rgba(255, 255, 255, 0.85);
-    min-width: 180px;
-    max-width: 260px;
+    min-width: 190px;
+    max-width: 250px;
     padding: 0;
 }
 
@@ -534,29 +565,37 @@ textarea {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    padding: 0.45rem;
+    padding: 0.55rem;
     box-sizing: border-box;
 }
 
 .critical-table .roll-band-header {
-    width: 120px;
+    width: 96px;
     background: rgba(255, 247, 230, 0.52);
-    font-size: 1.5rem;
+    font-size: 1rem;
     text-align: center;
     vertical-align: middle;
 }
 
 .critical-table thead th {
-    font-size: 1.5rem;
+    font-size: 0.9rem;
 }
 
-.critical-table td .affix-badge-list {
-    margin-top: auto;
+.critical-table thead .roll-band-header {
+    font-size: 0.8rem;
+}
+
+.critical-table-cell.is-editable:hover .critical-cell-description,
+.critical-table-cell.is-editable:focus-visible .critical-cell-description {
+    color: #8f5a2f;
 }
 
 .empty-cell {
     color: #a08464;
     font-style: italic;
+    display: block;
+    padding: 1rem 0.75rem;
+    text-align: center;
 }
 
 .critical-legend {
@@ -567,6 +606,15 @@ textarea {
     border: 1px solid rgba(127, 96, 55, 0.2);
 }
 
+.critical-legend-header {
+    display: grid;
+    gap: 0.2rem;
+}
+
+.critical-legend-header h4 {
+    margin: 0;
+}
+
 .legend-grid {
     display: grid;
     gap: 0.65rem;
@@ -736,6 +784,14 @@ textarea {
         width: 100%;
     }
 
+    .table-browser-header {
+        flex-direction: column;
+    }
+
+    .table-browser-edit-hint {
+        white-space: normal;
+    }
+
     .critical-editor-header,
     .critical-editor-footer {
         flex-direction: column;