내무부 500px 레이아웃을 바로잡음

This commit is contained in:
2026-08-31 18:50:13 +00:00
parent 50a443d94b
commit 8e0e7291de
2 changed files with 49 additions and 2 deletions
@@ -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<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 });
});
@@ -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 {