내무부 모바일 정렬과 스크롤을 바로잡음

app/game-frontend/e2e/commandArguments.spec.ts

@@ -3084,50 +3084,3 @@ test('keeps the chief footer return button the same size as the top return butto
     const mobile = await measure();
     expect(mobile.bottom).toEqual(mobile.top);
 });
-
-test('keeps the chief editor aligned to the 500px document without nested page scroll', async ({ page }) => {
-    await install(page);
-    await page.setViewportSize({ width: 500, height: 700 });
-    await page.goto('/che/chief-center');
-
-    const geometry = await page.locator('[data-command-scope="nation"]:visible').evaluate((editor) => {
-        const layout = editor.querySelector<HTMLElement>('.editor-layout')!;
-        const controls = editor.querySelector<HTMLElement>('.control-pad')!;
-        const queue = editor.querySelector<HTMLElement>('.queue-area')!;
-        const overview = document.querySelector<HTMLElement>('.chief-overview-frame')!;
-        const editorRect = editor.getBoundingClientRect();
-        const layoutRect = layout.getBoundingClientRect();
-        const controlsRect = controls.getBoundingClientRect();
-        const queueRect = queue.getBoundingClientRect();
-        const overviewRect = overview.getBoundingClientRect();
-        const scrollingElement = document.scrollingElement!;
-
-        return {
-            documentWidth: document.documentElement.clientWidth,
-            documentOverflow: scrollingElement.scrollWidth - scrollingElement.clientWidth,
-            editor: { left: editorRect.left, width: editorRect.width, height: editorRect.height },
-            layout: { left: layoutRect.left, width: layoutRect.width, height: layoutRect.height },
-            controls: { left: controlsRect.left, width: controlsRect.width },
-            queue: { left: queueRect.left, width: queueRect.width },
-            overviewTop: overviewRect.top,
-            editorBottom: editorRect.bottom,
-            editorOverflowX: getComputedStyle(editor).overflowX,
-            layoutOverflowX: getComputedStyle(layout).overflowX,
-        };
-    });
-
-    expect(geometry).toEqual({
-        documentWidth: 500,
-        documentOverflow: 0,
-        editor: { left: 0, width: 500, height: 420 },
-        layout: { left: 0, width: 500, height: 420 },
-        controls: { left: 0, width: 125 },
-        queue: { left: 125, width: 375 },
-        overviewTop: geometry.editorBottom,
-        editorBottom: geometry.editorBottom,
-        editorOverflowX: 'visible',
-        layoutOverflowX: 'visible',
-    });
-
-    await page.screenshot({ path: test.info().outputPath('chief-center-mobile-500.png'), fullPage: true });
-});

app/game-frontend/e2e/nationOffices.spec.ts

@@ -737,6 +737,61 @@ test('finance matches the reference 1000px and 500px computed DOM contracts', as
     await screenshot(page, 'core-finance-mobile-head.png');
 });
 
+test('finance centers its 500px mobile document without a nested horizontal scroller', async ({ page }) => {
+    await installFixture(page, { role: 'head', rate: 20 });
+    await page.setViewportSize({ width: 800, height: 900 });
+    await gotoOffice(page, 'nation/finance');
+    await expect(page.getByText('외교관계')).toBeVisible();
+
+    const centeredMobile = await page.locator('#finance-container').evaluate((container) => {
+        const rect = container.getBoundingClientRect();
+        const style = getComputedStyle(container);
+        const scrollingElement = document.scrollingElement!;
+        return {
+            viewportWidth: document.documentElement.clientWidth,
+            documentScrollWidth: scrollingElement.scrollWidth,
+            left: rect.left,
+            right: rect.right,
+            width: rect.width,
+            overflowX: style.overflowX,
+            overflowY: style.overflowY,
+            containerScrollLeft: container.scrollLeft,
+        };
+    });
+    expect(centeredMobile).toEqual({
+        viewportWidth: 800,
+        documentScrollWidth: 800,
+        left: 150,
+        right: 650,
+        width: 500,
+        overflowX: 'clip',
+        overflowY: 'visible',
+        containerScrollLeft: 0,
+    });
+    await page.locator('#finance-container').evaluate((container) => container.scrollTo({ left: 200 }));
+    expect(await page.locator('#finance-container').evaluate((container) => container.scrollLeft)).toBe(0);
+
+    await page.setViewportSize({ width: 500, height: 900 });
+    const exactMobile = await page.locator('#finance-container').evaluate((container) => {
+        const rect = container.getBoundingClientRect();
+        return {
+            viewportWidth: document.documentElement.clientWidth,
+            documentScrollWidth: document.scrollingElement!.scrollWidth,
+            left: rect.left,
+            right: rect.right,
+            width: rect.width,
+        };
+    });
+    expect(exactMobile).toEqual({
+        viewportWidth: 500,
+        documentScrollWidth: 500,
+        left: 0,
+        right: 500,
+        width: 500,
+    });
+    await screenshot(page, 'core-finance-mobile-centered-500.png');
+});
+
 test('finance enforces edit permissions and preserves the old value across an API failure', async ({ page }) => {
     const state: FixtureState = { role: 'head', rate: 20, failNextRate: true };
     await installFixture(page, state);

app/game-frontend/src/components/command/ReservedCommandEditor.vue

@@ -1269,9 +1269,9 @@ const clickOutsideMenu = (event: Event) => {
 }
 
 .mobile.compact .editor-layout {
-    min-height: 420px;
+    min-height: 370px;
     display: grid;
-    grid-template-columns: 125px 375px;
+    grid-template-columns: 109px 391px;
     grid-template-rows: auto auto;
 }
 .mobile.compact .control-pad {

app/game-frontend/src/views/NationStratFinanView.vue

@@ -719,8 +719,8 @@ textarea {
 @media (max-width: 939.98px) {
     .page-finance {
         width: 500px;
-        margin: 0;
-        overflow-x: hidden;
+        margin: 0 auto;
+        overflow-x: clip;
     }
     .top-back-bar,
     .bottom-bar {