diff --git a/src/RolemasterDb.App/Components/App.razor b/src/RolemasterDb.App/Components/App.razor
index 4d83862..c24ff0b 100644
--- a/src/RolemasterDb.App/Components/App.razor
+++ b/src/RolemasterDb.App/Components/App.razor
@@ -20,6 +20,7 @@
+
diff --git a/src/RolemasterDb.App/Components/Pages/Tables.razor b/src/RolemasterDb.App/Components/Pages/Tables.razor
index a3036b2..fe91f4b 100644
--- a/src/RolemasterDb.App/Components/Pages/Tables.razor
+++ b/src/RolemasterDb.App/Components/Pages/Tables.razor
@@ -3,6 +3,7 @@
@using System
@using System.Collections.Generic
@using System.Diagnostics.CodeAnalysis
+@inject IJSRuntime JSRuntime
@inject LookupService LookupService
Critical Tables
@@ -175,6 +176,8 @@
private bool isReferenceDataLoading = true;
private string? detailError;
private Dictionary<(string RollBand, string? GroupKey, string ColumnKey), CriticalTableCellDetail>? cellIndex;
+ private int tableLayoutVersion;
+ private int appliedLayoutVersion = -1;
private bool IsTableSelectionDisabled => isReferenceDataLoading || (referenceData?.CriticalTables.Count ?? 0) == 0;
protected override async Task OnInitializedAsync()
@@ -198,6 +201,7 @@
{
tableDetail = null;
cellIndex = null;
+ tableLayoutVersion++;
return;
}
@@ -222,9 +226,21 @@
{
isDetailLoading = false;
BuildCellIndex();
+ tableLayoutVersion++;
}
}
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (tableDetail is null || appliedLayoutVersion == tableLayoutVersion)
+ {
+ return;
+ }
+
+ await JSRuntime.InvokeVoidAsync("rolemasterTables.alignCriticalCells");
+ appliedLayoutVersion = tableLayoutVersion;
+ }
+
private void BuildCellIndex()
{
if (tableDetail?.Cells is null)
diff --git a/src/RolemasterDb.App/wwwroot/app.css b/src/RolemasterDb.App/wwwroot/app.css
index 0993de2..4c0506d 100644
--- a/src/RolemasterDb.App/wwwroot/app.css
+++ b/src/RolemasterDb.App/wwwroot/app.css
@@ -544,30 +544,26 @@ textarea {
display: flex;
flex-direction: column;
gap: 0.25rem;
- height: 100%;
padding: 0.45rem;
+ box-sizing: border-box;
}
.critical-table .roll-band-header {
width: 120px;
background: rgba(255, 247, 230, 0.52);
- font-size: 0.98rem;
+ font-size: 1.5rem;
text-align: center;
vertical-align: middle;
}
.critical-table thead th {
- font-size: 0.98rem;
+ font-size: 1.5rem;
}
.critical-table td .affix-badge-list {
margin-top: auto;
}
-.critical-table tbody tr {
- height: 1px;
-}
-
.empty-cell {
color: #a08464;
font-style: italic;
diff --git a/src/RolemasterDb.App/wwwroot/tables.js b/src/RolemasterDb.App/wwwroot/tables.js
new file mode 100644
index 0000000..6db05a0
--- /dev/null
+++ b/src/RolemasterDb.App/wwwroot/tables.js
@@ -0,0 +1,26 @@
+window.rolemasterTables = window.rolemasterTables || {
+ alignCriticalCells() {
+ const tables = document.querySelectorAll(".critical-table");
+
+ for (const table of tables) {
+ for (const cell of table.querySelectorAll("td > .critical-cell")) {
+ cell.style.minHeight = "";
+ }
+
+ for (const row of table.tBodies) {
+ for (const tr of row.rows) {
+ for (const cell of tr.cells) {
+ const criticalCell = cell.querySelector(":scope > .critical-cell");
+ if (!criticalCell) {
+ continue;
+ }
+
+ criticalCell.style.minHeight = `${cell.clientHeight}px`;
+ }
+ }
+ }
+ }
+ }
+};
+
+window.addEventListener("resize", () => window.rolemasterTables.alignCriticalCells());