From 64a96c6d5e01f9b3cb6ce48b6784a46358fb2943 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Sat, 15 Aug 2026 04:07:54 +0000
Subject: [PATCH] fix(frontend): keep battle action records inline

---
 app/game-frontend/e2e/inGameMenus.spec.ts | 78 ++++++++++++++++++++++-
 app/game-frontend/src/assets/main.css     |  9 +++
 2 files changed, 86 insertions(+), 1 deletion(-)

diff --git a/app/game-frontend/e2e/inGameMenus.spec.ts b/app/game-frontend/e2e/inGameMenus.spec.ts
index 3dbcf455..1a241beb 100644
--- a/app/game-frontend/e2e/inGameMenus.spec.ts
+++ b/app/game-frontend/e2e/inGameMenus.spec.ts
@@ -63,6 +63,11 @@ type FixtureState = {
     joinConfig?: Record<string, unknown>;
     createGeneralInputs?: Array<Record<string, unknown>>;
     mainTraits?: { personal: string; specialDomestic: string; specialWar: string };
+    recentRecords?: {
+        global: Array<{ id: number; text: string; createdAt?: string }>;
+        general: Array<{ id: number; text: string; createdAt?: string }>;
+        history: Array<{ id: number; text: string; createdAt?: string }>;
+    };
 };
 
 type TrpcRequestPayload = {
@@ -442,7 +447,8 @@ const install = async (page: Page, state: FixtureState) => {
                     canRespondDiplomacy: false,
                 });
             if (operation === 'messages.getContacts') return response({ nation: [] });
-            if (operation === 'general.getRecentRecords') return response({ global: [], general: [], history: [] });
+            if (operation === 'general.getRecentRecords')
+                return response(state.recentRecords ?? { global: [], general: [], history: [] });
             if (operation === 'board.getAccess') return response({ permission: 4, canMeeting: true, canSecret: true });
             if (operation === 'tournament.getState') return response({ stage: 0 });
             if (operation === 'public.getTraffic')
@@ -650,6 +656,76 @@ test('메인 카드의 국가·수도·관직·계급·병종은 Ref 출력명
     await expect(page.locator('.main-page')).not.toContainText('che_');
 });
 
+test('메인 개인 기록의 전투 결과는 월 표제와 시각을 한 줄에 표시한다', async ({ page }) => {
+    const state: FixtureState = {
+        permission: 'head',
+        myset: 3,
+        settingMutations: [],
+        accessPages: [],
+        recentRecords: {
+            global: [],
+            general: [
+                {
+                    id: 18609,
+                    text:
+                        '<S>◆</>186년 9월:<div class="small_war_log">' +
+                        '<span class="me"><span class="crew_type">귀병</span> ' +
+                        '<span class="name_plate_cover">【<span class="name">Administrator</span>】</span> ' +
+                        '<span class="remain_crew">0</span>(<span class="killed_crew">-2209</span>)</span> ' +
+                        '<span class="war_type war_type_defense">←</span> ' +
+                        '<span class="you"><span class="remain_crew">1361</span>' +
+                        '(<span class="killed_crew">-5539</span>) <span class="crew_type">기병</span> ' +
+                        '<span class="name_plate_cover">【<span class="name">ⓝ뇌동</span>】</span></span></div>',
+                    createdAt: '2026-01-01T03:54:00.000Z',
+                },
+            ],
+            history: [],
+        },
+    };
+    await install(page, state);
+    await page.setViewportSize({ width: 1200, height: 900 });
+    await page.goto('');
+
+    const expectedText = '◆186년 9월:귀병 【Administrator】 0(-2209) ← 1361(-5539) 기병 【ⓝ뇌동】 12:54';
+    const inspect = async (line: Locator) => {
+        await expect(line).toContainText(expectedText);
+        return line.evaluate((element) => {
+            const lineRect = element.getBoundingClientRect();
+            const battle = element.querySelector<HTMLElement>('.small_war_log');
+            if (!battle) throw new Error('전투 요약 markup을 찾지 못했습니다.');
+            const battleRect = battle.getBoundingClientRect();
+            return {
+                line: { top: lineRect.top, height: lineRect.height },
+                battle: {
+                    top: battleRect.top,
+                    height: battleRect.height,
+                    display: getComputedStyle(battle).display,
+                },
+                lineHeight: getComputedStyle(element).lineHeight,
+            };
+        });
+    };
+    const assertSingleLine = (geometry: Awaited<ReturnType<typeof inspect>>) => {
+        expect(geometry.battle.display).toBe('inline-block');
+        expect(geometry.line.height).toBe(21);
+        expect(geometry.battle.height).toBe(21);
+        expect(geometry.battle.top).toBeCloseTo(geometry.line.top, 0);
+    };
+
+    const desktopGeometry = await inspect(
+        page.locator('.record-zone [data-record-bucket="general"] .record-line').first()
+    );
+    assertSingleLine(desktopGeometry);
+    await persistParityArtifact(page, 'core-main-personal-battle-log-inline-desktop', desktopGeometry);
+
+    await page.setViewportSize({ width: 500, height: 900 });
+    const mobileGeometry = await inspect(
+        page.locator('.record-zone-mobile [data-record-bucket="general"] .record-line').first()
+    );
+    assertSingleLine(mobileGeometry);
+    await persistParityArtifact(page, 'core-main-personal-battle-log-inline-mobile', mobileGeometry);
+});
+
 test('접속량정보 keeps the legacy public 1016px chart geometry', async ({ page }) => {
     const state: FixtureState = { permission: 'member', myset: 0, settingMutations: [], accessPages: [] };
     await install(page, state);
diff --git a/app/game-frontend/src/assets/main.css b/app/game-frontend/src/assets/main.css
index 0564b4d9..38e3b1c3 100644
--- a/app/game-frontend/src/assets/main.css
+++ b/app/game-frontend/src/assets/main.css
@@ -77,3 +77,12 @@ textarea {
 .legacy-bg2 {
     background-image: var(--sammo-texture-blue);
 }
+
+/*
+ * Ref emits battle summaries as a classed div inside a single log row, then
+ * turns that div into an inline-level box. Without this rule the month prefix,
+ * battle summary, and action time are forced onto three separate lines.
+ */
+.small_war_log {
+    display: inline-block;
+}