Improve critical table browsing UX

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

@@ -9,31 +9,35 @@
 <PageTitle>Critical Tables</PageTitle>
 
 <section class="panel tables-page">
-    <div class="table-selector">
-        <label for="critical-table-select">Critical table</label>
-        <select
-            id="critical-table-select"
-            class="input-shell"
-            value="@selectedTableSlug"
-            @onchange="HandleTableChanged"
-            disabled="@IsTableSelectionDisabled">
-            @if (referenceData is null)
-            {
-                <option value="">Loading tables...</option>
-            }
-            else
-            {
-                @foreach (var table in referenceData.CriticalTables)
+    <div class="table-browser-toolbar">
+        <div class="table-selector">
+            <label for="critical-table-select">Table</label>
+            <select
+                id="critical-table-select"
+                class="input-shell"
+                value="@selectedTableSlug"
+                @onchange="HandleTableChanged"
+                disabled="@IsTableSelectionDisabled">
+                @if (referenceData is null)
                 {
-                    <option value="@table.Key">@table.Label</option>
+                    <option value="">Loading tables...</option>
                 }
-            }
-        </select>
+                else
+                {
+                    @foreach (var table in referenceData.CriticalTables)
+                    {
+                        <option value="@table.Key">@table.Label</option>
+                    }
+                }
+            </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>
-                <h2 class="panel-title">@detail.DisplayName</h2>
+            <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)
                         {