#301: stop /settings scrolling horizontally at 320px #309
@ -120,11 +120,22 @@ async function expectNoHorizontalScroll(page: Page, label: string): Promise<void
|
|||||||
const report = await page.evaluate(() => {
|
const report = await page.evaluate(() => {
|
||||||
const doc = document.documentElement;
|
const doc = document.documentElement;
|
||||||
const limit = doc.clientWidth;
|
const limit = doc.clientWidth;
|
||||||
|
/** Content inside its own scroll container is allowed to be wider than
|
||||||
|
* the viewport — that is the prescribed remedy, not the defect. Only
|
||||||
|
* what pushes the PAGE is a finding. */
|
||||||
|
const insideScroller = (el: HTMLElement): boolean => {
|
||||||
|
for (let node = el.parentElement; node && node !== doc; node = node.parentElement) {
|
||||||
|
const overflowX = getComputedStyle(node).overflowX;
|
||||||
|
if (overflowX === 'auto' || overflowX === 'scroll' || overflowX === 'hidden') return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
const offenders: string[] = [];
|
const offenders: string[] = [];
|
||||||
for (const el of Array.from(document.querySelectorAll<HTMLElement>('body *'))) {
|
for (const el of Array.from(document.querySelectorAll<HTMLElement>('body *'))) {
|
||||||
const rect = el.getBoundingClientRect();
|
const rect = el.getBoundingClientRect();
|
||||||
// 1 px Toleranz gegen Subpixel-Rundung.
|
// 1 px Toleranz gegen Subpixel-Rundung.
|
||||||
if (rect.width > 0 && rect.right > limit + 1) {
|
if (rect.width > 0 && rect.right > limit + 1 && !insideScroller(el)) {
|
||||||
const cls =
|
const cls =
|
||||||
el.className && typeof el.className === 'string'
|
el.className && typeof el.className === 'string'
|
||||||
? `.${el.className.trim().split(/\s+/).join('.')}`
|
? `.${el.className.trim().split(/\s+/).join('.')}`
|
||||||
@ -134,7 +145,7 @@ async function expectNoHorizontalScroll(page: Page, label: string): Promise<void
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return { scrollWidth: doc.scrollWidth, clientWidth: limit, offenders: offenders.slice(0, 12) };
|
return { scrollWidth: doc.scrollWidth, clientWidth: limit, offenders: offenders.slice(0, 20) };
|
||||||
});
|
});
|
||||||
expect(
|
expect(
|
||||||
{ overflowBy: report.scrollWidth - report.clientWidth, offenders: report.offenders },
|
{ overflowBy: report.scrollWidth - report.clientWidth, offenders: report.offenders },
|
||||||
|
|||||||
@ -4014,6 +4014,12 @@ ul[data-type='task_list'] li p:last-of-type {
|
|||||||
position: static;
|
position: static;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
/* THE reflow fix (issue #301). As a flex child the nav defaults to
|
||||||
|
`min-width: auto`, i.e. the min-content width of the whole jump
|
||||||
|
strip — so it pushed the column wider than the viewport and its own
|
||||||
|
`overflow-x: auto` never got the chance to scroll anything. Measured
|
||||||
|
at 320px: 417px of page-level overflow, all of it these links. */
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-nav ul {
|
.settings-nav ul {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user