From 74f76aaa4faba399c3ff36393fe7bcf3123aacec Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Tue, 4 Aug 2026 07:31:04 +0000
Subject: [PATCH] fix(frontend): align legacy title, selector and grid
 contracts

Ref keeps the page title row at its default alignment and centres only the
heading, rules the yearbook selector row with 1px gray edges, and lets the log
panels overflow instead of clipping. The shared Lumen control family gets Ref's
middle baseline, and the general grid drops a bottom rule and clip that Ref does
not have.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../src/assets/styles/legacy-controls.css          |  2 ++
 app/game-frontend/src/views/GlobalInfoView.vue     | 13 ++++++++++---
 app/game-frontend/src/views/NationGeneralsView.vue |  3 +--
 app/game-frontend/src/views/NationSecretView.vue   |  3 ++-
 app/game-frontend/src/views/YearbookView.vue       | 14 +++++++++++---
 5 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/app/game-frontend/src/assets/styles/legacy-controls.css b/app/game-frontend/src/assets/styles/legacy-controls.css
index 0334988..3112e8b 100644
--- a/app/game-frontend/src/assets/styles/legacy-controls.css
+++ b/app/game-frontend/src/assets/styles/legacy-controls.css
@@ -61,6 +61,8 @@
     background: var(--legacy-button-bg);
     color: #fff;
     line-height: 21px;
+    /* Ref's framework baseline for these controls. */
+    vertical-align: middle;
 }
 
 .legacy-button.legacy-button--secondary {
diff --git a/app/game-frontend/src/views/GlobalInfoView.vue b/app/game-frontend/src/views/GlobalInfoView.vue
index 43d31fe..21aad22 100644
--- a/app/game-frontend/src/views/GlobalInfoView.vue
+++ b/app/game-frontend/src/views/GlobalInfoView.vue
@@ -152,9 +152,14 @@ onMounted(async () => {
     position: relative;
     width: 100%;
     height: 32px;
-    text-align: center;
+    text-align: left;
     background-image: var(--sammo-texture-walnut);
 }
+
+.legacy-title > strong {
+    display: block;
+    text-align: center;
+}
 .legacy-title strong {
     font-size: 24px;
     font-weight: 400;
@@ -209,7 +214,8 @@ onMounted(async () => {
     transform-origin: top;
 }
 .matrix th {
-    font-weight: 400;
+    padding: 1px;
+    font-weight: 700;
 }
 .matrix .vertical {
     writing-mode: vertical-rl;
@@ -303,7 +309,8 @@ onMounted(async () => {
     width: 15%;
 }
 .footer {
-    box-sizing: content-box;
+    box-sizing: border-box;
+    text-align: left;
     height: 35.5px;
     margin-top: 0;
     padding: 20px 0 0;
diff --git a/app/game-frontend/src/views/NationGeneralsView.vue b/app/game-frontend/src/views/NationGeneralsView.vue
index 7223dfc..e0e26b0 100644
--- a/app/game-frontend/src/views/NationGeneralsView.vue
+++ b/app/game-frontend/src/views/NationGeneralsView.vue
@@ -222,7 +222,6 @@ onMounted(load);
     max-width: 1000px;
     height: 100vh;
     margin: 0 auto;
-    overflow: hidden;
     font: 14px/21px var(--sammo-font-sans);
     color: #fff;
     background-color: transparent;
@@ -238,7 +237,7 @@ onMounted(load);
     justify-content: center;
     background-color: transparent;
     background-image: var(--sammo-texture-walnut);
-    border-bottom: 1px solid #42484a;
+    /* Ref's `.back_bar` has no bottom rule; the grid below draws its own. */
     font-size: 14px;
 }
 .top-bar strong {
diff --git a/app/game-frontend/src/views/NationSecretView.vue b/app/game-frontend/src/views/NationSecretView.vue
index 8b12b9e..e83891b 100644
--- a/app/game-frontend/src/views/NationSecretView.vue
+++ b/app/game-frontend/src/views/NationSecretView.vue
@@ -259,10 +259,11 @@ select {
 .summary th {
     width: 120px;
 }
+/* Ref collapses this list table; `separate` shifted every row by the spacing. */
 .list {
     width: 974px;
     margin: 0 auto;
-    border-collapse: separate;
+    border-collapse: collapse;
     table-layout: auto;
 }
 .list th,
diff --git a/app/game-frontend/src/views/YearbookView.vue b/app/game-frontend/src/views/YearbookView.vue
index b1139e9..e61d97d 100644
--- a/app/game-frontend/src/views/YearbookView.vue
+++ b/app/game-frontend/src/views/YearbookView.vue
@@ -236,14 +236,20 @@ onMounted(async () => {
     background-color: transparent;
 }
 
+/* Ref's `.back_bar` keeps default text alignment; only the heading centres. */
 .yearbook-title {
     position: relative;
     min-height: 32px;
-    text-align: center;
+    text-align: left;
     line-height: 21px;
     background-color: transparent;
 }
 
+.yearbook-title > strong {
+    display: block;
+    text-align: center;
+}
+
 .yearbook-title strong {
     display: inline-block;
     line-height: 32px;
@@ -283,6 +289,7 @@ onMounted(async () => {
     border: 1px solid gray;
 }
 
+/* Ref's selector row is a `.center.row` with 1px gray rules above and below. */
 .year-selector {
     display: grid;
     grid-template-columns: 110px 110px minmax(220px, 1fr) 110px;
@@ -290,8 +297,10 @@ onMounted(async () => {
     align-items: center;
     gap: 4px;
     min-height: 37.5px;
+    border-top: 1px solid gray;
+    border-bottom: 1px solid gray;
     padding: 0;
-    text-align: right;
+    text-align: center;
 }
 
 .year-selector select {
@@ -352,7 +361,6 @@ onMounted(async () => {
 
 .history-log {
     grid-column: 1 / -1;
-    overflow: hidden;
 }
 .history-log:first-of-type {
     height: 128px;