akai-tools/readest
2
0
Fork 0
forked from akai/readest
Code Pull Requests Activity

fix(style): clamp oversized hardcoded pixel widths and fix browser test flakiness (#3785)

Browse Source 
Closes #3770.

Add transformStylesheet rule that clips CSS width declarations exceeding the
viewport with max-width and border-box sizing. Also add @testing-library/react
to vitest browser optimizeDeps.include to prevent mid-test Vite reloads on CI.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Huang Xin
2026-04-07 13:23:30 +08:00
committed by GitHub
parent 017a9338b3
commit db35a4e203
6 changed files with 72 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src/utils/style.ts
+14
View File
@@ -764,6 +764,20 @@ export const transformStylesheet = (css: string, vw: number, vh: number, vertica
return selector + block;
});
// clip hardcoded pixel widths to available width when they exceed viewport
css = css.replace(ruleRegex, (match, selector, block) => {
const widthMatch = /(?:^|[^a-z-])width\s*:\s*(\d+(?:\.\d+)?)px/.exec(block);
const pxWidth = widthMatch ? parseFloat(widthMatch[1] ?? '0') : 0;
if (pxWidth > vw && !/max-width\s*:/.test(block)) {
block = block.replace(
/}$/,
' max-width: calc(var(--available-width) * 1px); box-sizing: border-box; }',
);
return selector + block;
}
return match;
});
// replace absolute font sizes with rem units
// replace vw and vh as they cause problems with layout
// replace hardcoded colors