fix(ui): fix transcript-strip pill gap in WebKit#249
Merged
Conversation
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: Combined Review (
|
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: Combined Review (
|
Contributor
Author
|
Given that the test runs the high priority review is clearly imvalid |
Owner
|
agreed. merging this, thank you! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Root cause
WebKit doesn't resolve
height: 100%on flex children when the parent only hasmin-height.The pills rendered at 16px inside a 26px container, leaving an 8px gap.
Fix: change
min-height: 26pxtoheight: 26pxon.transcript-strip.Before / After (WebKit, Playwright)
Before — pills don't fill container height:
After — pills fill full container height:
Test plan
npx playwright install --with-deps chromium webkit)🤖 Generated with Claude Code