akai/readest
2
1
Fork 1
Code Issues Pull Requests Actions 10 Packages Projects Releases Wiki 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/__tests__/utils/style.test.ts
+40
View File
@@ -268,6 +268,46 @@ describe('transformStylesheet', () => {
});
});
describe('hardcoded pixel width clamping', () => {
it('adds max-width and border-box when width exceeds viewport', () => {
const css = '.calibre8 { display: block; width: 1200px; padding: 2em 0 0 1em; }';
const result = transformStylesheet(css, VW, VH, VERTICAL);
expect(result).toContain('max-width: calc(var(--available-width) * 1px)');
expect(result).toContain('box-sizing: border-box');
});
it('does not clamp when width is smaller than viewport', () => {
const css = '.box { width: 450px; padding: 2em; }';
const result = transformStylesheet(css, VW, VH, VERTICAL);
expect(result).not.toContain('max-width: calc(var(--available-width)');
});
it('does not add max-width when one already exists', () => {
const css = '.box { width: 1200px; max-width: 100%; }';
const result = transformStylesheet(css, VW, VH, VERTICAL);
const matches = result.match(/max-width/g);
expect(matches).toHaveLength(1);
});
it('does not affect max-width or min-width properties', () => {
const css = '.box { max-width: 1200px; min-width: 200px; }';
const result = transformStylesheet(css, VW, VH, VERTICAL);
expect(result).not.toContain('max-width: calc(var(--available-width)');
});
it('does not add max-width for non-pixel width values', () => {
const css = '.box { width: 50%; }';
const result = transformStylesheet(css, VW, VH, VERTICAL);
expect(result).not.toContain('max-width: calc(var(--available-width)');
});
it('does not add max-width for em width values', () => {
const css = '.box { width: 20em; }';
const result = transformStylesheet(css, VW, VH, VERTICAL);
expect(result).not.toContain('max-width: calc(var(--available-width)');
});
});
describe('preserves unrelated CSS', () => {
it('passes through CSS without any matching patterns unchanged', () => {
const css = '.custom { display: flex; padding: 10px; margin: 5px; }';