From 1f213799646ad3ba4f0659863dda81d38ac29d42 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Tue, 4 Aug 2026 07:44:00 +0000
Subject: [PATCH] fix(frontend): stop clipping pages Ref leaves visible

The auction, my page, nation betting and hall of fame roots clipped content that
Ref lets overflow, which shifted their measured document size. The dashboard
reload controls and the diplomacy table frame now follow Ref's Lumen navigation
family and its non-collapsed gray/black frame.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 app/game-frontend/src/views/AuctionView.vue       |  2 --
 app/game-frontend/src/views/DiplomacyView.vue     | 11 ++++++++++-
 app/game-frontend/src/views/HallOfFameView.vue    |  2 +-
 app/game-frontend/src/views/MainView.vue          | 13 ++++++++++++-
 app/game-frontend/src/views/MyPageView.vue        |  1 -
 app/game-frontend/src/views/NationBettingView.vue |  1 -
 6 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/app/game-frontend/src/views/AuctionView.vue b/app/game-frontend/src/views/AuctionView.vue
index c46cbde5..bea7221f 100644
--- a/app/game-frontend/src/views/AuctionView.vue
+++ b/app/game-frontend/src/views/AuctionView.vue
@@ -509,11 +509,9 @@ onMounted(() => {
 }
 .legacy-auction-page.resource-page {
     height: 689px;
-    overflow: hidden;
 }
 .legacy-auction-page.unique-page {
     height: 378px;
-    overflow: hidden;
 }
 .legacy-auction-page.bg0 {
     background-color: transparent;
diff --git a/app/game-frontend/src/views/DiplomacyView.vue b/app/game-frontend/src/views/DiplomacyView.vue
index e2c21fe2..cb7aee3c 100644
--- a/app/game-frontend/src/views/DiplomacyView.vue
+++ b/app/game-frontend/src/views/DiplomacyView.vue
@@ -648,10 +648,19 @@ onBeforeUnmount(() => {
     line-height: 1.3;
 }
 
+/*
+ * Ref's diplomacy tables are not collapsed and carry an outset-style frame:
+ * gray on the top and left edges, black on the right and bottom.
+ */
 .legacy-layout-table {
     width: 1000px;
     margin: 0 auto;
-    border-collapse: collapse;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-top: 1px solid gray;
+    border-left: 1px solid gray;
+    border-right: 1px solid #000;
+    border-bottom: 1px solid #000;
     background-color: transparent;
 }
 
diff --git a/app/game-frontend/src/views/HallOfFameView.vue b/app/game-frontend/src/views/HallOfFameView.vue
index 76578f58..7bbc84c3 100644
--- a/app/game-frontend/src/views/HallOfFameView.vue
+++ b/app/game-frontend/src/views/HallOfFameView.vue
@@ -181,9 +181,9 @@ onMounted(loadOptions);
 </template>
 
 <style scoped>
+/* Ref's document does not clip; the page column stays 500px wide instead. */
 :global(body:has(.legacy-hall-page)) {
     min-width: 500px;
-    overflow-x: hidden;
 }
 
 .legacy-hall-page {
diff --git a/app/game-frontend/src/views/MainView.vue b/app/game-frontend/src/views/MainView.vue
index 9833f18c..2106881d 100644
--- a/app/game-frontend/src/views/MainView.vue
+++ b/app/game-frontend/src/views/MainView.vue
@@ -716,17 +716,28 @@ button {
     margin-top: 31px;
 }
 
+/*
+ * Ref renders these dashboard controls with the Lumen navigation family: no top
+ * border, 1px sides and a 4px bottom edge that shortens on hover and press
+ * while the control moves down.
+ */
 .desktop-action-controls .game-shell__action {
-    border: 1px solid transparent;
+    border-color: #004f28;
+    border-style: solid;
+    border-width: 0 1px 4px;
     background: #006b36;
     color: #fff;
 }
 
 .desktop-action-controls .game-shell__action:hover {
+    margin-top: 1px;
+    border-bottom-width: 3px;
     background: #00582c;
 }
 
 .desktop-action-controls .game-shell__action:active {
+    margin-top: 2px;
+    border-bottom-width: 2px;
     background: #005128;
 }
 
diff --git a/app/game-frontend/src/views/MyPageView.vue b/app/game-frontend/src/views/MyPageView.vue
index a0d97fd5..7ff5f290 100644
--- a/app/game-frontend/src/views/MyPageView.vue
+++ b/app/game-frontend/src/views/MyPageView.vue
@@ -629,7 +629,6 @@ onMounted(() => {
     font-family: var(--sammo-font-sans);
     font-size: 14px;
     line-height: 1.3;
-    overflow: hidden;
 }
 .my-page-mobile-scroll-spacer {
     display: none;
diff --git a/app/game-frontend/src/views/NationBettingView.vue b/app/game-frontend/src/views/NationBettingView.vue
index d7a2df2d..c9be8118 100644
--- a/app/game-frontend/src/views/NationBettingView.vue
+++ b/app/game-frontend/src/views/NationBettingView.vue
@@ -454,7 +454,6 @@ onMounted(() => {
     font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
     font-size: 14px;
     line-height: 1.5;
-    overflow-x: hidden;
 }
 
 .nation-betting-page.legacy-bg0 {