diff --git a/app/game-frontend/e2e/commandArguments.spec.ts b/app/game-frontend/e2e/commandArguments.spec.ts index a20f392f..75401ef8 100644 --- a/app/game-frontend/e2e/commandArguments.spec.ts +++ b/app/game-frontend/e2e/commandArguments.spec.ts @@ -3084,3 +3084,50 @@ 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('.editor-layout')!; + const controls = editor.querySelector('.control-pad')!; + const queue = editor.querySelector('.queue-area')!; + const overview = document.querySelector('.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 }); +}); diff --git a/app/game-frontend/src/components/command/ReservedCommandEditor.vue b/app/game-frontend/src/components/command/ReservedCommandEditor.vue index 7f4529c5..af876847 100644 --- a/app/game-frontend/src/components/command/ReservedCommandEditor.vue +++ b/app/game-frontend/src/components/command/ReservedCommandEditor.vue @@ -1269,9 +1269,9 @@ const clickOutsideMenu = (event: Event) => { } .mobile.compact .editor-layout { - min-height: 370px; + min-height: 420px; display: grid; - grid-template-columns: 109px 391px; + grid-template-columns: 125px 375px; grid-template-rows: auto auto; } .mobile.compact .control-pad {