fix(desktop): pin feedback-rail to grid column 2 - #12
Open
nycterent wants to merge 2 commits into
Open
Conversation
When a website loads, the renderer sets emptyState.hidden = true. The [hidden] rule (display:none) removes the empty-state from the .workspace grid, so the lone remaining child (.feedback-rail) auto-placed into column 1 (1fr) — directly under the website WebContentsView overlay — hiding the recording controls and leaving column 2 blank. Pin .empty-state to column 1 and .feedback-rail to column 2 so removing the empty-state can no longer reflow the rail. capturePage() masked this because it does not composite the child website view over the page.
There was a problem hiding this comment.
Pull request overview
Fixes a desktop-recorder layout bug where the feedback rail disappears behind the composited website view after navigation, by preventing grid auto-placement from moving the rail into column 1 when the empty-state is hidden.
Changes:
- Explicitly pins
.empty-stateto grid column 1. - Explicitly pins
.feedback-railto grid column 2 to keep controls visible when.empty-stateis removed via[hidden].
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Reads the real styles.css/index.html and asserts the workspace stays a two-column grid, the rail is pinned to column 2 (and empty-state to column 1), and both are direct grid children. Fails if the pin is removed — the exact regression that hid the recording controls when a site loaded.
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.
Problem
Opening a website in the desktop recorder makes the entire feedback rail (capture toggles, consent, Start recording) disappear — the right ~354px goes blank. The app looks like it has no controls once you load the site you want to record.
Root cause
.workspaceis a two-column grid:grid-template-columns: 1fr var(--rail-width)— column 1 is.empty-state, column 2 is.feedback-rail.On navigation the renderer runs
emptyState.hidden = hasWebsite(src/renderer.ts). The global[hidden] { display: none !important; }rule removes the empty-state from the grid entirely. With only one child left, the grid auto-places.feedback-railinto column 1 (1fr) — which is exactly where the websiteWebContentsViewis composited on top. The rail ends up hidden behind the site, and column 2 is left empty (blank paper strip).This is invisible to
webContents.capturePage(), since that captures only the page layer and not the child website view composited over it — so the bug only shows on screen.Fix
Pin the grid placement so removing the empty-state can't reflow the rail:
Test plan
npm run typecheckclean,npm test32/32 pass.app(GPU-on), not just dev🤖 Generated with Claude Code