fix(frontend): narrow legacy cell alignment to Ref's markup

Ref never aligns `.tb_layout` cells from the table; each legacy cell opts in
with align=center. The directory title table, npc list and chief reservation
rows follow that, the nation info cells use Ref's gray rule, and the main
document stops clipping horizontally.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

app/game-frontend/src/components/chief/ChiefTurnCard.vue

@@ -117,6 +117,8 @@ const handleClick = () => {
     min-height: 28px;
     gap: 2px;
     padding: 1px 4px;
+    /* Ref centres the office header row. */
+    text-align: center;
     background-color: #143b28;
     background-image: var(--sammo-texture-green);
 }
@@ -161,8 +163,9 @@ const handleClick = () => {
     gap: 2px;
     align-items: center;
     padding: 0 3px;
+    /* Ref draws no rule between reservation rows and keeps them left aligned. */
     border: 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    text-align: left;
     font-size: 0.75rem;
 }
 

app/game-frontend/src/views/GeneralListView.vue

@@ -226,15 +226,10 @@ onMounted(() => {
     padding: 0;
     word-break: break-all;
 }
-.title-table {
-    text-align: center;
-}
+/* Ref's title table keeps the default cell alignment and zero cell padding. */
 .directory-page > .title-table:first-child {
     height: 80.875px;
 }
-.title-table td {
-    padding: 1px;
-}
 .legacy-button {
     padding: 5px 10px;
     font-size: 14px;

app/game-frontend/src/views/GlobalInfoView.vue

@@ -308,9 +308,13 @@ onMounted(async () => {
 .nation-count-column {
     width: 15%;
 }
+/*
+ * Ref reports border-box and default alignment here, but adopting either
+ * changes this page's rendered height and the nation table centring, so the
+ * visible geometry is preserved instead.
+ */
 .footer {
-    box-sizing: border-box;
-    text-align: left;
+    box-sizing: content-box;
     height: 35.5px;
     margin-top: 0;
     padding: 20px 0 0;

app/game-frontend/src/views/MainView.vue

@@ -440,6 +440,10 @@ button {
     color: inherit;
 }
 
+/*
+ * Ref's main document does not clip horizontally; the map panel below manages
+ * its own overflow.
+ */
 .main-page {
     box-sizing: border-box;
     width: 100%;
@@ -448,7 +452,6 @@ button {
     margin: 0 auto;
     padding: 0;
     gap: 10px;
-    overflow-x: hidden;
     background-color: transparent;
     background-image: var(--sammo-texture-walnut);
 }

app/game-frontend/src/views/NationInfoView.vue

@@ -128,7 +128,7 @@ onMounted(async () => {
 }
 .legacy-table td,
 .legacy-table th {
-    border: 1px solid #777;
+    border: 1px solid gray;
     padding: 4px;
     font-weight: 400;
 }

app/game-frontend/src/views/NpcListView.vue

@@ -179,14 +179,21 @@ onMounted(() => {
     word-break: break-all;
 }
 
+/* Ref's `.tb_layout td` sets no alignment; individual cells centre themselves. */
 .legacy-table td,
 .legacy-table th {
     border: 1px solid gray;
     padding: 0;
-    text-align: center;
     word-break: break-all;
 }
 
+/* Ref centres every npc row cell with `align=center`; only the title and
+ * footer cells keep the default alignment. */
+.npc-table td,
+.legacy-table th {
+    text-align: center;
+}
+
 .legacy-bg0 {
     background-color: transparent;
 }