Make chat timeline height estimates width-aware with attachment-aware tests

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   quality:
-    name: Lint, Typecheck, Test, Build
+    name: Lint, Typecheck, Test, Browser Test, Build
     runs-on: blacksmith-4vcpu-ubuntu-2404
     steps:
       - name: Checkout
@@ -34,6 +34,14 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-bun-${{ hashFiles('bun.lock') }}-
 
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
       - name: Install dependencies
         run: bun install --frozen-lockfile
 
@@ -46,6 +54,14 @@ jobs:
       - name: Test
         run: bun run test
 
+      - name: Install browser test runtime
+        run: |
+          cd apps/web
+          bunx playwright install --with-deps chromium
+
+      - name: Browser test
+        run: bun run --cwd apps/web test:browser
+
       - name: Build desktop pipeline
         run: bun run build:desktop
 

.gitignore

@@ -11,4 +11,7 @@ packages/*/dist
 build/
 .logs/
 release/
-.t3
+.t3
+apps/web/.playwright
+apps/web/playwright-report
+apps/web/src/components/__screenshots__

apps/web/package.json

@@ -9,7 +9,9 @@
     "prepare": "effect-language-service patch",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
-    "test": "vitest run --passWithNoTests"
+    "test": "vitest run --passWithNoTests",
+    "test:browser": "vitest run --config vitest.browser.config.ts",
+    "test:browser:install": "playwright install --with-deps chromium"
   },
   "dependencies": {
     "@base-ui/react": "^1.2.0",
@@ -41,10 +43,14 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/browser-playwright": "^4.0.18",
     "babel-plugin-react-compiler": "^19.0.0-beta-e552027-20250112",
+    "msw": "^2.12.10",
+    "playwright": "^1.58.2",
     "tailwindcss": "^4.0.0",
     "typescript": "catalog:",
     "vite": "^8.0.0-beta.12",
-    "vitest": "catalog:"
+    "vitest": "catalog:",
+    "vitest-browser-react": "^2.0.5"
   }
 }