fix(chatWidth): adapt width for split-screen / narrow windows

Use screen-relative pixel max-width instead of viewport-relative vw units
so chat content fills available space when the window is smaller than the
user's intended width (e.g. Windows split-screen).

Closes #371

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Entire-Checkpoint: c63020c0c264

Author: Nagi-ovo

src/pages/content/chatWidth/__tests__/chatWidth.test.ts

@@ -2,6 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const STYLE_ID = 'gemini-voyager-chat-width';
 const STORAGE_KEY = 'geminiChatWidth';
+const MOCK_SCREEN_WIDTH = 1920;
 
 type StorageChangeListener = (
   changes: Record<string, chrome.storage.StorageChange>,
@@ -14,10 +15,15 @@ function getInjectedStyle(): HTMLStyleElement {
   return style as HTMLStyleElement;
 }
 
-function expectTableRuleWidth(styleText: string, widthVw: number): void {
-  const escapedWidth = widthVw.toString().replace('.', '\\.');
+function percentToPixels(percent: number): number {
+  return Math.round((percent / 100) * MOCK_SCREEN_WIDTH);
+}
+
+function expectTableRuleWidth(styleText: string, percent: number): void {
+  const px = percentToPixels(percent);
+  const escapedWidth = px.toString();
   const tableRulePattern = new RegExp(
-    String.raw`\/\* Gemini table containers \*\/[\s\S]*table-block,[\s\S]*\.table-block,[\s\S]*\.table-block \.table-content[\s\S]*\{[\s\S]*max-width: ${escapedWidth}vw !important;[\s\S]*width: min\(100%, ${escapedWidth}vw\) !important;`,
+    String.raw`\/\* Gemini table containers \*\/[\s\S]*table-block,[\s\S]*\.table-block,[\s\S]*\.table-block \.table-content[\s\S]*\{[\s\S]*max-width: ${escapedWidth}px !important;[\s\S]*width: min\(100%, ${escapedWidth}px\) !important;`,
   );
   expect(styleText).toMatch(tableRulePattern);
 }
@@ -40,6 +46,13 @@ describe('chatWidth', () => {
     document.head.innerHTML = '';
     document.body.innerHTML = '<main></main>';
 
+    // Mock screen dimensions for deterministic tests
+    Object.defineProperty(window, 'screen', {
+      value: { availWidth: MOCK_SCREEN_WIDTH, width: MOCK_SCREEN_WIDTH },
+      writable: true,
+      configurable: true,
+    });
+
     storageChangeListeners = [];
 
     (chrome.storage.sync.get as unknown as ReturnType<typeof vi.fn>).mockImplementation(
@@ -86,4 +99,22 @@ describe('chatWidth', () => {
     expect(styleText).toContain('table-block .table-content');
     expectSingleTableScrollbarRules(styleText);
   });
+
+  it('adapts width for narrow viewports (split-screen behavior)', async () => {
+    // Simulate: user sets 70% on a 1920px screen → 1344px max-width
+    // In split-screen (960px viewport), min(100%, 1344px) fills the viewport
+    (chrome.storage.sync.get as unknown as ReturnType<typeof vi.fn>).mockImplementation(
+      (_defaults: Record<string, unknown>, callback: (value: Record<string, unknown>) => void) => {
+        callback({ [STORAGE_KEY]: 70 });
+      },
+    );
+
+    const { startChatWidthAdjuster } = await import('../index');
+    startChatWidthAdjuster();
+
+    const styleText = getInjectedStyle().textContent ?? '';
+    const expectedPx = percentToPixels(70); // 1344
+    expect(styleText).toContain(`max-width: ${expectedPx}px !important`);
+    expect(styleText).toContain(`width: min(100%, ${expectedPx}px) !important`);
+  });
 });

src/pages/content/chatWidth/index.ts

@@ -61,7 +61,12 @@ const normalizePercent = (value: number, fallback: number) => {
 
 function applyWidth(widthPercent: number) {
   const normalizedPercent = normalizePercent(widthPercent, DEFAULT_PERCENT);
-  const widthValue = `${normalizedPercent}vw`;
+  // Use screen width as reference to compute pixel-based max-width.
+  // This provides adaptive behavior for split-screen / narrow windows:
+  // - Fullscreen: width ≈ percent% of screen (as intended by the slider)
+  // - Split-screen: content fills available space since pixel max-width > viewport
+  const screenWidth = screen.availWidth || screen.width || 1920;
+  const widthValue = `${Math.round((normalizedPercent / 100) * screenWidth)}px`;
 
   let style = document.getElementById(STYLE_ID) as HTMLStyleElement;
   if (!style) {