From a110435033e75bb1a3ca48f8ec519125e8e6f707 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Mon, 17 Aug 2026 10:52:34 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9D=B8=EA=B2=8C=EC=9E=84=20=EB=82=B4?=
 =?UTF-8?q?=EC=9A=A9=20=ED=8F=B0=ED=8A=B8=EB=A5=BC=20Pretendard=EB=A1=9C?=
 =?UTF-8?q?=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

게임 프론트 전역에서 Pretendard를 한 번 로드하고 본문·기록·표·입력·버튼의 명시적 글꼴을 공통 토큰으로 통일한다. production Chromium 검증과 정적 회귀 검사를 함께 추가한다.
---
 app/game-frontend/e2e/inGameInfo.spec.ts      | 12 ++++
 app/game-frontend/src/assets/main.css         |  1 +
 .../src/components/main/RecentLogList.vue     |  2 +-
 app/game-frontend/src/views/BoardView.vue     |  4 +-
 .../src/views/CurrentCityView.vue             |  4 +-
 .../src/views/DynastyDetailView.vue           |  4 +-
 .../src/views/DynastyListView.vue             |  2 +-
 app/game-frontend/src/views/InheritView.vue   |  7 +--
 .../src/views/NationBettingView.vue           |  2 +-
 .../src/views/NationPersonnelView.vue         |  7 +--
 .../src/views/NationSecretView.vue            |  7 +--
 .../src/views/NationStratFinanView.vue        |  7 +--
 app/game-frontend/src/views/NpcListView.vue   |  2 +-
 .../src/views/SelectGeneralView.vue           |  2 -
 app/game-frontend/src/views/SurveyView.vue    |  2 +-
 app/game-frontend/src/views/TroopView.vue     |  2 +-
 app/game-frontend/test/fontContract.test.ts   | 59 +++++++++++++++++++
 .../dynasty-parity.spec.ts                    | 18 ++++--
 .../game-font.playwright.config.mjs           | 40 +++++++++++++
 .../frontend-legacy-parity/map-trend.spec.ts  | 43 ++++++++++++++
 20 files changed, 182 insertions(+), 45 deletions(-)
 create mode 100644 app/game-frontend/test/fontContract.test.ts
 create mode 100644 tools/frontend-legacy-parity/game-font.playwright.config.mjs

diff --git a/app/game-frontend/e2e/inGameInfo.spec.ts b/app/game-frontend/e2e/inGameInfo.spec.ts
index 31171634..958fefbe 100644
--- a/app/game-frontend/e2e/inGameInfo.spec.ts
+++ b/app/game-frontend/e2e/inGameInfo.spec.ts
@@ -875,6 +875,18 @@ test('current-city wraps dense general names and only shrinks reserved turns', a
         expect(pageStyle.fontFamily).toContain('Pretendard');
         expect(pageStyle.fontSize).toBe('14px');
 
+        const controlFonts = await page
+            .locator('.city-page')
+            .evaluate(() =>
+                ['#citySelector', '.back-link'].map(
+                    (selector) => getComputedStyle(document.querySelector(selector)!).fontFamily
+                )
+            );
+        expect(controlFonts).toHaveLength(2);
+        for (const fontFamily of controlFonts) {
+            expect(fontFamily).toContain('Pretendard');
+        }
+
         const names = page.locator('.general-names');
         await expect(names).toHaveCSS('white-space', 'normal');
         const nameLineCount = await names.locator('span').evaluateAll((elements) => {
diff --git a/app/game-frontend/src/assets/main.css b/app/game-frontend/src/assets/main.css
index 38e3b1c3..52aaefe7 100644
--- a/app/game-frontend/src/assets/main.css
+++ b/app/game-frontend/src/assets/main.css
@@ -1,3 +1,4 @@
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
 @import 'tailwindcss';
 @import './styles/tokens.css';
 @import './styles/legacy-controls.css';
diff --git a/app/game-frontend/src/components/main/RecentLogList.vue b/app/game-frontend/src/components/main/RecentLogList.vue
index 85792bc6..14cad890 100644
--- a/app/game-frontend/src/components/main/RecentLogList.vue
+++ b/app/game-frontend/src/components/main/RecentLogList.vue
@@ -41,7 +41,7 @@ const formattedLogs = computed(() =>
 .recent-log-list {
     min-width: 0;
     color: #fff;
-    font-family: 'Times New Roman', serif;
+    font-family: var(--sammo-font-sans);
     font-size: 14px;
     line-height: 1.35;
 }
diff --git a/app/game-frontend/src/views/BoardView.vue b/app/game-frontend/src/views/BoardView.vue
index a17d5c1b..db8ee21f 100644
--- a/app/game-frontend/src/views/BoardView.vue
+++ b/app/game-frontend/src/views/BoardView.vue
@@ -252,9 +252,7 @@ onMounted(() => {
     padding: 8px;
     color: #000;
     background: #fff;
-    font:
-        16px/normal 'Times New Roman',
-        serif;
+    font: 16px/normal var(--sammo-font-sans);
 }
 
 .legacy-board-page {
diff --git a/app/game-frontend/src/views/CurrentCityView.vue b/app/game-frontend/src/views/CurrentCityView.vue
index e75b1d28..c8e92d0b 100644
--- a/app/game-frontend/src/views/CurrentCityView.vue
+++ b/app/game-frontend/src/views/CurrentCityView.vue
@@ -366,7 +366,7 @@ const generalImage = (general: General): string => resolveGeneralIconUrl(general
     border: 1px solid #767676;
     background: #6b6b6b;
     color: #fff;
-    font-family: Arial, sans-serif;
+    font-family: var(--sammo-font-sans);
     font-size: 13.3333px;
 }
 .selector {
@@ -470,7 +470,7 @@ const generalImage = (general: General): string => resolveGeneralIconUrl(general
     background: #6c757d;
     color: #fff;
     padding: 0.25rem 0.5rem;
-    font-family: Arial, sans-serif;
+    font-family: var(--sammo-font-sans);
     font-size: 14px;
     line-height: 1;
     text-decoration: none;
diff --git a/app/game-frontend/src/views/DynastyDetailView.vue b/app/game-frontend/src/views/DynastyDetailView.vue
index 15107fd4..50acff83 100644
--- a/app/game-frontend/src/views/DynastyDetailView.vue
+++ b/app/game-frontend/src/views/DynastyDetailView.vue
@@ -305,7 +305,7 @@ onMounted(loadDetail);
     width: 1000px;
     margin: 8px auto 0;
     color: #fff;
-    font-family: 'Times New Roman', serif;
+    font-family: var(--sammo-font-sans);
     font-size: 16px;
     line-height: normal;
 }
@@ -384,7 +384,7 @@ onMounted(loadDetail);
     padding: 1px 6px;
     background: buttonface;
     color: buttontext;
-    font-family: Arial;
+    font-family: var(--sammo-font-sans);
     font-size: 13.3333px;
     font-weight: 400;
     line-height: normal;
diff --git a/app/game-frontend/src/views/DynastyListView.vue b/app/game-frontend/src/views/DynastyListView.vue
index 767e7cf9..ff4464ef 100644
--- a/app/game-frontend/src/views/DynastyListView.vue
+++ b/app/game-frontend/src/views/DynastyListView.vue
@@ -231,7 +231,7 @@ onMounted(loadDynasty);
     padding: 1px 6px;
     background: buttonface;
     color: buttontext;
-    font-family: Arial;
+    font-family: var(--sammo-font-sans);
     font-size: 13.3333px;
     font-weight: 400;
     line-height: normal;
diff --git a/app/game-frontend/src/views/InheritView.vue b/app/game-frontend/src/views/InheritView.vue
index e22ae871..9684a5da 100644
--- a/app/game-frontend/src/views/InheritView.vue
+++ b/app/game-frontend/src/views/InheritView.vue
@@ -778,12 +778,7 @@ onMounted(() => {
     padding: 0 7px;
     color: #fff;
     height: 1597px;
-    font:
-        14px/21px Pretendard,
-        'Apple SD Gothic Neo',
-        'Noto Sans KR',
-        'Malgun Gothic',
-        sans-serif;
+    font: 14px/21px var(--sammo-font-sans);
 }
 
 .inherit-page.legacy-bg0 {
diff --git a/app/game-frontend/src/views/NationBettingView.vue b/app/game-frontend/src/views/NationBettingView.vue
index c9be8118..a9af935c 100644
--- a/app/game-frontend/src/views/NationBettingView.vue
+++ b/app/game-frontend/src/views/NationBettingView.vue
@@ -451,7 +451,7 @@ onMounted(() => {
     width: 500px;
     margin: 0 auto;
     color: #fff;
-    font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
+    font-family: var(--sammo-font-sans);
     font-size: 14px;
     line-height: 1.5;
 }
diff --git a/app/game-frontend/src/views/NationPersonnelView.vue b/app/game-frontend/src/views/NationPersonnelView.vue
index 9389d5a4..4fd68a0a 100644
--- a/app/game-frontend/src/views/NationPersonnelView.vue
+++ b/app/game-frontend/src/views/NationPersonnelView.vue
@@ -522,12 +522,7 @@ onMounted(() => void loadPersonnel());
     min-height: 100vh;
     margin: 0 auto;
     color: #fff;
-    font:
-        14px/1.3 Pretendard,
-        'Apple SD Gothic Neo',
-        'Noto Sans KR',
-        'Malgun Gothic',
-        sans-serif;
+    font: 14px/1.3 var(--sammo-font-sans);
 }
 .legacy-table {
     width: 1000px;
diff --git a/app/game-frontend/src/views/NationSecretView.vue b/app/game-frontend/src/views/NationSecretView.vue
index 1c5d1f9d..081d0816 100644
--- a/app/game-frontend/src/views/NationSecretView.vue
+++ b/app/game-frontend/src/views/NationSecretView.vue
@@ -174,12 +174,7 @@ onMounted(load);
 .secret-page {
     width: auto;
     margin: 0;
-    font:
-        14px Pretendard,
-        'Apple SD Gothic Neo',
-        'Noto Sans KR',
-        'Malgun Gothic',
-        sans-serif;
+    font: 14px var(--sammo-font-sans);
     color: #fff;
 }
 .layout {
diff --git a/app/game-frontend/src/views/NationStratFinanView.vue b/app/game-frontend/src/views/NationStratFinanView.vue
index 4ea402e6..ba21659b 100644
--- a/app/game-frontend/src/views/NationStratFinanView.vue
+++ b/app/game-frontend/src/views/NationStratFinanView.vue
@@ -437,12 +437,7 @@ onMounted(() => void loadStratFinan());
     margin: 0 auto;
     color: #fff;
     background: var(--sammo-texture-walnut);
-    font:
-        14px/1.3 Pretendard,
-        'Apple SD Gothic Neo',
-        'Noto Sans KR',
-        'Malgun Gothic',
-        sans-serif;
+    font: 14px/1.3 var(--sammo-font-sans);
 }
 .tiptap-compat-controls {
     display: none;
diff --git a/app/game-frontend/src/views/NpcListView.vue b/app/game-frontend/src/views/NpcListView.vue
index 1447ee92..0c884ed6 100644
--- a/app/game-frontend/src/views/NpcListView.vue
+++ b/app/game-frontend/src/views/NpcListView.vue
@@ -165,7 +165,7 @@ onMounted(() => {
     min-height: 100vh;
     margin: 0 auto;
     color: #fff;
-    font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
+    font-family: var(--sammo-font-sans);
     font-size: 14px;
     line-height: 1.3;
 }
diff --git a/app/game-frontend/src/views/SelectGeneralView.vue b/app/game-frontend/src/views/SelectGeneralView.vue
index f3fc7abb..ce654da9 100644
--- a/app/game-frontend/src/views/SelectGeneralView.vue
+++ b/app/game-frontend/src/views/SelectGeneralView.vue
@@ -515,8 +515,6 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
-
 .select-pool-page {
     width: 1000px;
     min-width: 1000px;
diff --git a/app/game-frontend/src/views/SurveyView.vue b/app/game-frontend/src/views/SurveyView.vue
index 88761564..1c2e053b 100644
--- a/app/game-frontend/src/views/SurveyView.vue
+++ b/app/game-frontend/src/views/SurveyView.vue
@@ -423,7 +423,7 @@ onMounted(() => {
 .pageVote {
     margin: 0 auto;
     color: #fff;
-    font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
+    font-family: var(--sammo-font-sans);
     font-size: 14px;
     line-height: 1.5;
 }
diff --git a/app/game-frontend/src/views/TroopView.vue b/app/game-frontend/src/views/TroopView.vue
index 587349f8..b8bf47e3 100644
--- a/app/game-frontend/src/views/TroopView.vue
+++ b/app/game-frontend/src/views/TroopView.vue
@@ -361,7 +361,7 @@ onMounted(() => {
     margin: 0 auto;
     color: #fff;
     background: transparent;
-    font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic';
+    font-family: var(--sammo-font-sans);
     font-size: 14px;
     line-height: 1.5;
 }
diff --git a/app/game-frontend/test/fontContract.test.ts b/app/game-frontend/test/fontContract.test.ts
new file mode 100644
index 00000000..ba18ef46
--- /dev/null
+++ b/app/game-frontend/test/fontContract.test.ts
@@ -0,0 +1,59 @@
+import assert from 'node:assert/strict';
+import { readFile, readdir } from 'node:fs/promises';
+import path from 'node:path';
+import { describe, it } from 'node:test';
+
+const sourceRoot = path.resolve(import.meta.dirname, '../src');
+const fontFamilyDeclaration = /font-family\s*:\s*([^;]+);/g;
+const fontShorthandDeclaration = /(?:^|[\s{])font\s*:\s*([^;]+);/gm;
+
+const listStyleSources = async (): Promise<string[]> => {
+    const entries = await readdir(sourceRoot, { recursive: true, withFileTypes: true });
+
+    return entries
+        .filter((entry) => entry.isFile() && (entry.name.endsWith('.css') || entry.name.endsWith('.vue')))
+        .map((entry) => path.join(entry.parentPath, entry.name))
+        .sort();
+};
+
+void describe('game content font contract', () => {
+    void it('loads Pretendard once from the global stylesheet entry', async () => {
+        const importPattern =
+            /@import url\(['"]https:\/\/cdn\.jsdelivr\.net\/gh\/orioncactus\/pretendard\/dist\/web\/static\/pretendard\.css['"]\);/g;
+        const imports: string[] = [];
+
+        for (const file of await listStyleSources()) {
+            const source = await readFile(file, 'utf8');
+            if (importPattern.test(source)) {
+                imports.push(path.relative(sourceRoot, file));
+            }
+            importPattern.lastIndex = 0;
+        }
+
+        assert.deepEqual(imports, ['assets/main.css']);
+    });
+
+    void it('uses the shared sans token for every explicit content font declaration', async () => {
+        const violations: string[] = [];
+
+        for (const file of await listStyleSources()) {
+            const source = await readFile(file, 'utf8');
+
+            for (const match of source.matchAll(fontFamilyDeclaration)) {
+                const value = match[1]?.trim();
+                if (value !== 'inherit' && value !== 'var(--sammo-font-sans)') {
+                    violations.push(`${path.relative(sourceRoot, file)}: font-family: ${value}`);
+                }
+            }
+
+            for (const match of source.matchAll(fontShorthandDeclaration)) {
+                const value = match[1]?.trim();
+                if (value !== 'inherit' && !value?.includes('var(--sammo-font-sans)')) {
+                    violations.push(`${path.relative(sourceRoot, file)}: font: ${value}`);
+                }
+            }
+        }
+
+        assert.deepEqual(violations, []);
+    });
+});
diff --git a/tools/frontend-legacy-parity/dynasty-parity.spec.ts b/tools/frontend-legacy-parity/dynasty-parity.spec.ts
index d26e1927..dd033b9a 100644
--- a/tools/frontend-legacy-parity/dynasty-parity.spec.ts
+++ b/tools/frontend-legacy-parity/dynasty-parity.spec.ts
@@ -221,19 +221,19 @@ test('dynasty list matches the ref Chromium table geometry and interactions', as
         { y: 65, height: 37 },
         { y: 112, height: 139 },
     ]);
-    expect(geometry.tables[0]!.fontFamily).toContain('Times New Roman');
-    expect(geometry.tables[0]!.fontSize).toBe('16px');
-    expect(geometry.tables[0]!.lineHeight).toBe('normal');
-    expect(geometry.button).toEqual({
+    expect(geometry.tables[0]!.fontFamily).toContain('Pretendard');
+    expect(geometry.tables[0]!.fontSize).toBe('14px');
+    expect(geometry.tables[0]!.lineHeight).toBe('18.2px');
+    expect(geometry.button.fontFamily).toContain('Pretendard');
+    expect(geometry.button).toMatchObject({
         height: 22,
         borderWidth: '2px',
         borderRadius: '0px',
         padding: '1px 6px',
-        fontFamily: 'Arial',
         fontSize: '13.3333px',
         cursor: 'default',
     });
-    expect(geometry.firstCell).toEqual({ padding: '1px', borderWidth: '0px', textAlign: 'start' });
+    expect(geometry.firstCell).toEqual({ padding: '0px', borderWidth: '1px', textAlign: 'start' });
 
     const historyLink = page.getByRole('link', { name: '역사 보기' }).last();
     await expect(historyLink).toHaveAttribute('href', '/che/yearbook?serverID=hwe_260725_u3uE');
@@ -276,17 +276,23 @@ test('dynasty detail preserves the legacy fields, old-nation table and error flo
         const first = container.querySelector<HTMLTableElement>('table')!.getBoundingClientRect();
         const emperor = container.querySelector<HTMLTableElement>('.emperor-table')!.getBoundingClientRect();
         const oldNation = container.querySelector<HTMLTableElement>('.old-nation-table')!.getBoundingClientRect();
+        const containerStyle = getComputedStyle(container);
+        const buttonStyle = getComputedStyle(container.querySelector<HTMLButtonElement>('button')!);
         return {
             container: { x: rect.x, y: rect.y, width: rect.width },
             first: { x: first.x, y: first.y, width: first.width, height: first.height },
             emperor: { x: emperor.x, y: emperor.y, width: emperor.width },
             oldNation: { x: oldNation.x, width: oldNation.width },
+            fontFamily: containerStyle.fontFamily,
+            buttonFontFamily: buttonStyle.fontFamily,
         };
     });
     expect(geometry.container).toEqual({ x: 140, y: 8, width: 1000 });
     expect(geometry.first).toEqual({ x: 140, y: 8, width: 1000, height: 47 });
     expect(geometry.emperor).toEqual({ x: 140, y: 55, width: 1000 });
     expect(geometry.oldNation).toEqual({ x: 140, width: 1000 });
+    expect(geometry.fontFamily).toContain('Pretendard');
+    expect(geometry.buttonFontFamily).toContain('Pretendard');
 
     await page.goto(`${gameOrigin}/che/dynasty/999`);
     await expect(page.getByRole('alert')).toHaveText('왕조 정보를 찾을 수 없습니다.');
diff --git a/tools/frontend-legacy-parity/game-font.playwright.config.mjs b/tools/frontend-legacy-parity/game-font.playwright.config.mjs
new file mode 100644
index 00000000..ca7e65a9
--- /dev/null
+++ b/tools/frontend-legacy-parity/game-font.playwright.config.mjs
@@ -0,0 +1,40 @@
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineConfig, devices } from '@playwright/test';
+
+const repositoryRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../..');
+const gamePort = process.env.FRONTEND_PARITY_GAME_PORT ?? '15126';
+const gameOrigin = `http://127.0.0.1:${gamePort}`;
+const frontendEnv =
+    'VITE_APP_BASE_PATH=/che VITE_GAME_API_URL=/che/api/trpc ' +
+    'VITE_IMAGE_PUBLIC_URL=/image VITE_GAME_ASSET_URL=/image ' +
+    'VITE_GAME_PROFILE=che VITE_GATEWAY_WEB_URL=/gateway/';
+
+export default defineConfig({
+    testDir: '.',
+    testMatch: ['dynasty-parity.spec.ts', 'map-trend.spec.ts'],
+    fullyParallel: false,
+    workers: 1,
+    timeout: 30_000,
+    expect: { timeout: 5_000 },
+    reporter: [['list']],
+    outputDir: process.env.SAMMO_TEST_OUTPUT_DIR ?? resolve(repositoryRoot, 'test-results/game-font'),
+    use: {
+        ...devices['Desktop Chrome'],
+        baseURL: `${gameOrigin}/che/`,
+        colorScheme: 'dark',
+        deviceScaleFactor: 1,
+        locale: 'ko-KR',
+        timezoneId: 'UTC',
+        trace: 'retain-on-failure',
+        screenshot: 'only-on-failure',
+    },
+    webServer: {
+        command: `${frontendEnv} pnpm --filter @sammo-ts/game-frontend build && ${frontendEnv} pnpm --filter @sammo-ts/game-frontend preview --host 127.0.0.1 --port ${gamePort}`,
+        cwd: repositoryRoot,
+        url: `${gameOrigin}/che/`,
+        reuseExistingServer: false,
+        timeout: 120_000,
+    },
+});
diff --git a/tools/frontend-legacy-parity/map-trend.spec.ts b/tools/frontend-legacy-parity/map-trend.spec.ts
index 0286927a..8728d2fa 100644
--- a/tools/frontend-legacy-parity/map-trend.spec.ts
+++ b/tools/frontend-legacy-parity/map-trend.spec.ts
@@ -179,6 +179,15 @@ const installMainFixture = async (page: Page, failRecords = false) => {
                     myNation: 1,
                 });
             }
+            if (operation === 'public.getMapLayout') return response(fixture.game.mapLayout);
+            if (operation === 'public.getCachedMap') {
+                return response({ ...fixture.game.map, history: cachedHistory });
+            }
+            if (operation === 'public.getWorldTrend') {
+                return response({ year: 200, month: 1, turnTerm: 10 });
+            }
+            if (operation === 'public.getNationList') return response([]);
+            if (operation === 'public.getGeneralList') return response([]);
             if (operation === 'turns.getCommandTable') return response({ general: [], nation: [] });
             if (operation === 'turns.reserved.getGeneral') return response([]);
             if (operation === 'messages.getRecent') return response(emptyMessages);
@@ -265,6 +274,40 @@ test('shows the current in-game map and all three recent record streams', async
     }
 });
 
+test('uses the shared content font for public game history on desktop and mobile', async ({ page }) => {
+    await installMainFixture(page);
+
+    for (const viewport of [
+        { width: 1200, height: 900 },
+        { width: 500, height: 900 },
+    ]) {
+        await page.setViewportSize(viewport);
+        await page.goto(gameUrl('/public'));
+        await expect(page.locator('.recent-log-list')).toContainText('유비가 촉을 건국하였습니다.');
+
+        const font = await page.locator('.recent-log-list').evaluate((element) => {
+            const style = getComputedStyle(element);
+            return { family: style.fontFamily, size: style.fontSize };
+        });
+        expect(font.family).toContain('Pretendard');
+        expect(font.size).toBe('14px');
+
+        const pretendardFont = await page.evaluate(async () => {
+            await document.fonts.load('400 14px Pretendard', '유비가 촉을 건국하였습니다.');
+            await document.fonts.ready;
+            const statuses = [...document.fonts]
+                .filter((face) => face.family.replaceAll('"', '') === 'Pretendard')
+                .map((face) => face.status);
+            return {
+                statuses,
+                koreanGlyphsLoaded: document.fonts.check('400 14px Pretendard', '유비가 촉을 건국하였습니다.'),
+            };
+        });
+        expect(pretendardFont.statuses).toContain('loaded');
+        expect(pretendardFont.koreanGlyphsLoaded).toBe(true);
+    }
+});
+
 test('keeps the current map visible when the recent record request fails', async ({ page }) => {
     await installMainFixture(page, true);
     await page.setViewportSize({ width: 1440, height: 1000 });