Skip to content

fix(ui): fix transcript-strip pill gap in WebKit#249

Merged
wesm merged 6 commits intowesm:mainfrom
mariusvniekerk:fix/transcript-strip-webkit-gap
Mar 28, 2026
Merged

fix(ui): fix transcript-strip pill gap in WebKit#249
wesm merged 6 commits intowesm:mainfrom
mariusvniekerk:fix/transcript-strip-webkit-gap

Conversation

@mariusvniekerk
Copy link
Copy Markdown
Contributor

@mariusvniekerk mariusvniekerk commented Mar 28, 2026

Summary

  • Fix transcript-strip pill backgrounds not filling the container height in WebKit (Tauri app)
  • Add WebKit as a Playwright e2e test target since the app ships as a Tauri app
  • Fix virtualizer measurement test flake in WebKit (row height coincidentally matching estimate)

Root cause

WebKit doesn't resolve height: 100% on flex children when the parent only has min-height.
The pills rendered at 16px inside a 26px container, leaving an 8px gap.
Fix: change min-height: 26px to height: 26px on .transcript-strip.

Before / After (WebKit, Playwright)

Before — pills don't fill container height:

image

After — pills fill full container height:

image

Test plan

  • Playwright e2e passes in Chromium (66/66)
  • Playwright e2e passes in WebKit (66/66)
  • CI installs webkit browser (npx playwright install --with-deps chromium webkit)
  • Verify in Tauri app visually

🤖 Generated with Claude Code

mariusvniekerk and others added 5 commits March 28, 2026 11:30
The pill buttons had `height: 100%` which doesn't resolve against a
parent with only `min-height`, overriding the flexbox `align-items:
stretch`. Removing it lets stretch fill the pills to the container.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Verifies that mode pills fill the full height of the transcript-strip
container with no visible gap at the bottom.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
WebKit doesn't resolve `height: 100%` on flex children when the parent
only has `min-height`. Change to explicit `height: 26px` on the
container so pills fill it fully in both Chromium and WebKit (Tauri).

Confirmed via Playwright: WebKit rendered pills at 16px in a 26px
container (8px gap); now correctly 24px.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Since the app ships as a Tauri app (WebKit), run e2e tests against
both Chromium and WebKit to catch rendering differences.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
A row can legitimately render at exactly the estimate height (120px).
Check that not all rows equal the estimate instead of asserting each
one differs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@roborev-ci
Copy link
Copy Markdown

roborev-ci bot commented Mar 28, 2026

roborev: Combined Review (8dd0674)

Verdict: No medium-or-higher findings; the changes look good to merge.


Synthesized from 3 reviews (agents: codex, gemini | types: default, security)

Makes it clear in CI logs which browser (chromium/webkit) each test
ran against, instead of just dots and a total count.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@roborev-ci
Copy link
Copy Markdown

roborev-ci bot commented Mar 28, 2026

roborev: Combined Review (e932a3b)

Verdict: Changes introduce one test-breaking issue and one meaningful test coverage regression risk.

High

  • frontend/e2e/transcript-strip.spec.ts:1
    Invalid leading space in the Playwright import path (" @playwright/test") will cause module resolution failure and break the E2E test file.
    Fix: Change it to import { test, expect } from "@playwright/test";

Medium

  • frontend/e2e/virtualizer.spec.ts:156
    The revised assertion now passes when any single rendered row differs from ESTIMATE_PX, which weakens the original guarantee that rows were actually remeasured. Because it still depends on exact float equality, a minor rounding difference can make the test pass even if most rows remain stuck at the estimate.
    Fix: Assert remeasurement directly with a small epsilon and fail when too many rows remain at the estimated height.

Synthesized from 3 reviews (agents: codex, gemini | types: default, security)

@mariusvniekerk
Copy link
Copy Markdown
Contributor Author

Given that the test runs the high priority review is clearly imvalid

@wesm
Copy link
Copy Markdown
Owner

wesm commented Mar 28, 2026

agreed. merging this, thank you!

@wesm wesm merged commit 8b8805a into wesm:main Mar 28, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants