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

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>

apps/readest-app/src/__tests__/utils/style.test.ts

@@ -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; }';

apps/readest-app/src/utils/style.ts

@@ -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