diff --git a/app/game-frontend/src/views/YearbookView.vue b/app/game-frontend/src/views/YearbookView.vue index f2db0e68..9afbe936 100644 --- a/app/game-frontend/src/views/YearbookView.vue +++ b/app/game-frontend/src/views/YearbookView.vue @@ -378,10 +378,10 @@ onMounted(async () => { grid-column: 1 / -1; } .history-log:first-of-type { - height: 128px; + min-height: 128px; } .history-log:last-of-type { - height: 65px; + min-height: 65px; } .dropdown-compat-buttons { display: none; @@ -441,7 +441,7 @@ onMounted(async () => { order: 4; } .history-log:first-of-type { - height: 149px; + min-height: 149px; margin-bottom: 0; } } diff --git a/tools/frontend-legacy-parity/visual-parity.spec.ts b/tools/frontend-legacy-parity/visual-parity.spec.ts index fb571756..3f2c16e5 100644 --- a/tools/frontend-legacy-parity/visual-parity.spec.ts +++ b/tools/frontend-legacy-parity/visual-parity.spec.ts @@ -955,6 +955,63 @@ test.describe('yearbook legacy parity', () => { }); } + for (const viewport of [ + { name: 'desktop', width: 1365, height: 768, minimumWorldHeight: 128 }, + { name: 'mobile', width: 390, height: 844, minimumWorldHeight: 149 }, + ]) { + test(`grows record blocks with long content on ${viewport.name}`, async ({ page }) => { + const longWorldHistory = Array.from( + { length: 12 }, + (_, index) => `● 중원 정세 긴 기록 ${index + 1}번째 줄입니다.` + ); + const longGlobalAction = Array.from( + { length: 8 }, + (_, index) => `● 장수 동향 긴 기록 ${index + 1}번째 줄입니다.` + ); + await page.route('**/che/api/trpc/**', async (route) => { + if (!operationNames(route).includes('yearbook.getHistory')) { + await route.fallback(); + return; + } + await fulfillOperations(route, () => ({ + ...fixture.game.yearbook, + data: { + ...fixture.game.yearbook.data, + globalHistory: longWorldHistory, + globalAction: longGlobalAction, + }, + })); + }); + + await page.setViewportSize(viewport); + await page.goto(gameUrl('/yearbook')); + await expect(page.getByText('중원 정세 긴 기록 12번째 줄입니다.')).toBeVisible(); + await expect(page.getByText('장수 동향 긴 기록 8번째 줄입니다.')).toBeVisible(); + if (artifactRoot) { + await page.screenshot({ + path: resolve(artifactRoot, `yearbook-long-content-${viewport.name}.png`), + fullPage: true, + animations: 'disabled', + }); + } + + const geometry = await page.locator('.history-log').evaluateAll((blocks) => + blocks.map((block) => { + const element = block as HTMLElement; + return { + height: element.getBoundingClientRect().height, + clientHeight: element.clientHeight, + scrollHeight: element.scrollHeight, + }; + }) + ); + expect(geometry[0]?.height).toBeGreaterThan(viewport.minimumWorldHeight); + expect(geometry[1]?.height).toBeGreaterThan(65); + expect(geometry[0]?.clientHeight).toBe(geometry[0]?.scrollHeight); + expect(geometry[1]?.clientHeight).toBe(geometry[1]?.scrollHeight); + }); + } + test('shows the history API error while keeping month navigation available', async ({ page }) => { await page.route('**/che/api/trpc/**', async (route) => { if (operationNames(route).includes('yearbook.getHistory')) {