From 8fa89d499ebeeadff8d8e517b40498b2e03ea5be Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Sat, 12 Sep 2026 09:33:28 +0000
Subject: [PATCH] =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=EA=B5=AD=EA=B0=80=C2=B7?=
 =?UTF-8?q?=EC=9E=A5=EC=88=98=20=EC=A0=95=EB=B3=B4=20=EC=B9=B4=EB=93=9C?=
 =?UTF-8?q?=EC=9D=98=20=EC=A2=8C=EC=9A=B0=20=EC=97=AC=EB=B0=B1=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/game-frontend/e2e/mainNavigation.spec.ts | 76 ++++++++++++++++++++
 app/game-frontend/src/views/MainView.vue     |  5 ++
 2 files changed, 81 insertions(+)

diff --git a/app/game-frontend/e2e/mainNavigation.spec.ts b/app/game-frontend/e2e/mainNavigation.spec.ts
index 555282ac..4df9f181 100644
--- a/app/game-frontend/e2e/mainNavigation.spec.ts
+++ b/app/game-frontend/e2e/mainNavigation.spec.ts
@@ -6760,3 +6760,79 @@ for (const viewport of [
         });
     }
 }
+
+test('main nation and general cards fill their panels without increasing overflow', async ({ page }, testInfo) => {
+    await installFixture(page, {
+        officerLevel: 1,
+        permission: 0,
+        nationLevel: 1,
+        stage: 0,
+        npcMode: 1,
+        generalMeCalls: 0,
+        operations: [],
+    });
+    const selector = '[data-main-target="nation"] > .panel-body, [data-main-target="general"] > .panel-body';
+    for (const width of [1200, 500, 390]) {
+        await page.setViewportSize({ width, height: 900 });
+        await waitForMain(page);
+        await page.evaluate(() => document.fonts.ready);
+        const measure = () =>
+            page.locator(selector).evaluateAll((bodies) => ({
+                documentWidth: document.documentElement.scrollWidth,
+                panels: bodies.map((body) => {
+                    const panel = body.parentElement!;
+                    const card = body.firstElementChild!;
+                    const panelRect = panel.getBoundingClientRect();
+                    const cardRect = card.getBoundingClientRect();
+                    const style = getComputedStyle(body);
+                    return {
+                        target: panel.getAttribute('data-main-target'),
+                        panel: panelRect.toJSON(),
+                        card: cardRect.toJSON(),
+                        padding: style.padding,
+                        paddingLeft: style.paddingLeft,
+                        paddingRight: style.paddingRight,
+                        paddingTop: style.paddingTop,
+                        paddingBottom: style.paddingBottom,
+                        leftInset: cardRect.left - panelRect.left,
+                        rightInset: panelRect.right - cardRect.right,
+                        overflow: card.scrollWidth - card.clientWidth,
+                        text: card.textContent,
+                    };
+                }),
+            }));
+        const oldPadding = await page.addStyleTag({ content: `${selector} { padding-inline: 6px !important; }` });
+        const before = await measure();
+        await page.screenshot({ path: testInfo.outputPath(`info-${width}-before.png`), fullPage: true });
+        await oldPadding.evaluate((element) => element.parentNode?.removeChild(element));
+        const after = await measure();
+        expect(after.documentWidth).toBe(before.documentWidth);
+        expect(after.documentWidth).toBeLessThanOrEqual(Math.max(width, 500));
+        expect(after.panels).toHaveLength(2);
+        for (const [index, panel] of after.panels.entries()) {
+            expect(panel.paddingLeft).toBe('0px');
+            expect(panel.paddingRight).toBe('0px');
+            expect(panel.paddingTop).toBe('6px');
+            expect(panel.paddingBottom).toBe('6px');
+            expect(panel.leftInset).toBe(0);
+            expect(panel.rightInset).toBe(0);
+            expect(panel.card.width).toBeCloseTo(before.panels[index]!.card.width + 12, 5);
+            expect(panel.panel.height).toBe(before.panels[index]!.panel.height);
+            expect(panel.text).toBe(before.panels[index]!.text);
+            expect(panel.overflow).toBe(0);
+        }
+        const strategic = page.locator('[data-nation-basic-card] .strategic');
+        await strategic.hover();
+        await expect(strategic.getByRole('tooltip')).toBeVisible();
+        await strategic.focus();
+        await expect(strategic.getByRole('tooltip')).toBeVisible();
+        await page.mouse.move(0, 0);
+        await strategic.blur();
+        await page.screenshot({ path: testInfo.outputPath(`info-${width}-after.png`), fullPage: true });
+        await writeFile(testInfo.outputPath(`info-${width}.json`), JSON.stringify({ before, after }, null, 2));
+        await writeFile(
+            testInfo.outputPath(`info-${width}.html`),
+            await page.locator('main').evaluate((element) => element.outerHTML)
+        );
+    }
+});
diff --git a/app/game-frontend/src/views/MainView.vue b/app/game-frontend/src/views/MainView.vue
index 249630f5..57f9864b 100644
--- a/app/game-frontend/src/views/MainView.vue
+++ b/app/game-frontend/src/views/MainView.vue
@@ -1039,6 +1039,11 @@ button {
     display: none;
 }
 
+[data-main-target='nation'] :deep(.panel-body),
+[data-main-target='general'] :deep(.panel-body) {
+    padding-inline: 0;
+}
+
 [data-main-target='map'] :deep(.panel-body),
 [data-main-target='city'] :deep(.panel-body) {
     padding: 0;