Repository navigation
fix(dialog): limit footer click-through to the gradient gutter - #2545
Conversation
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@feedback.communities.buzz.xyz> Signed-off-by: Taylor Ho <[email protected]>
There was a problem hiding this comment.
🤖 Carl, an automated reviewer, commenting via Wes's GitHub account.
Changes requested. The fix makes the translucent gutter clickable as intended, but it also makes the footer's opaque part click-through, so near-misses on the actions now land on form controls the user can't see. Details and a suggested fix are in the inline thread.
Validation: I reproduced the sticky footer structure in Playwright Chromium and WebKit using elementFromPoint hit tests. I did not run the Tauri app, and I couldn't confirm overlay-scrollbar behavior on the overflow-x: auto footer headlessly.
Merge criteria: only the gutter above the action row passes pointer input through. The action row and the band below it still block pointer input.
kalvinnchau
left a comment
kalvinnchau
left a comment
There was a problem hiding this comment.
🤖 One additional overflow interaction issue; the existing opaque-footer finding is not duplicated.
Co-authored-by: Carl <acda9e433d19dcd0e6b6840f7f4b98f3a56f1fab98049d444c087019e6d36560@feedback.communities.buzz.xyz> Signed-off-by: Taylor Ho <[email protected]>
tellaho
changed the title
wesbillman
left a comment
wesbillman
left a comment
There was a problem hiding this comment.
🤖 Carl, an automated reviewer, commenting via Wes's GitHub account.
No blockers at 6299382af. My earlier changes-requested finding is resolved: only the gradient gutter passes pointer input through, while the action row, blank space beside the actions, and the bottom inset block it again. Kalvin's overflow-scrolling concern is also addressed, since the row now owns overflow-x and gap/scrollbar hit testing. Non-sticky layouts keep the footer as their flex owner through display: contents, and AlertDialog is untouched.
Validation: source review of the production diff and its consumers (no other production code depends on the footer's direct children or scroller). Independent Playwright probe in Chromium and WebKit, at 1280px and 360px, with default and padded chrome: gutter hits the form, while the row gap, the area below the buttons, and the ring band hit the footer. Real pointerdown matches. Footer button boxes were identical between main and head across 56 non-sticky layout/engine/width/spacing configurations. CI is green.
Not verified: native Tauri behavior, scrollbar-thumb dragging, and reduced-transparency/forced-colors on WebKit. The repository checklist's fresh human test of this revision is still pending.
…leanup * origin/main: fix(dialog): limit footer click-through to the gradient gutter (#2545) fix(channels): put the huddle launcher after the other header tools (#2660) feat(drafts-sent): bundle Drafts & sent for everyone (#2644) feat(identity): one Builderlab sign-in, the native NIP-FI session (#2576) fix(agents): let people dismiss connection setup cards (#2631) Co-authored-by: Duncan <dcfd242e557282d7a1e2cf2e6877522682f1e5c6156dc92ca7d90eaedd3b0f95@buzz.block.builderlab.xyz> Signed-off-by: Will Pfleger <[email protected]> # Conflicts: # .github/workflows/release.yml # crates/plugin-manager/src/lib.rs # docs/configuration.md # src/bundled/builderlab/apps/client.test.ts # src/bundled/builderlab/apps/environment.ts # src/features/identity/builderlab-hosted.test.ts # src/features/identity/identity.test.tsx # vite.config.ts
…-service * origin/main: fix(sidebar): highlight collapsed sections with unread channels (#2539) perf(threads): isolate thread rows inside the scroller (#2462) perf(messages): skip the glass on closed message action bars (#2461) perf(threads): measure long-thread scrolling in browsers and the macOS app (#2460) docs(threads): set scrolling requirements and targets for long threads (#2459) fix(composer): seed required recipients in saved briefs (#2667) fix: preserve agent activity ownership and remove Solo composer gap (#2613) feat(agents): open agent card links in Create agent (#2662) Align Bestie messaging with the shared conversation workspace (#2614) feat(messages): add a compact message density (#2547) fix(dialog): limit footer click-through to the gradient gutter (#2545) fix(channels): put the huddle launcher after the other header tools (#2660) feat(drafts-sent): bundle Drafts & sent for everyone (#2644) feat(identity): one Builderlab sign-in, the native NIP-FI session (#2576) fix(agents): let people dismiss connection setup cards (#2631) AIDA-2425: Preserve links beside pasted images (#2520) feat(activity): show reactions to your messages in Activity (#2638) # Conflicts: # docs/identity.md # src-tauri/src/federated_identity/agent/mod.rs # src-tauri/src/federated_identity/mod.rs # src-tauri/src/federated_identity/tests.rs # src/bundled/codex/runtime.ts
Category: fix
User Impact: Visible form fields beneath dialog footer gradients stay clickable, while footer text, controls, and scrolling remain usable.
Problem: The gradient gutter blocked visible form fields. Making the entire footer pass input through also exposed hidden controls beneath its opaque action area and interrupted scrolling over footer gaps.
Solution: Give the footer one pointer-active content row that includes text, controls, blank space, and the bottom inset, and let only the gradient gutter pass input through. Fully opaque reduced-transparency and forced-colors modes also block input in the gutter.
File changes
src/shared/design-system/ui/Dialog.tsx
Group footer contents in one row so arbitrary nested controls, text, and portaled actions share the same interactive region.
src/shared/design-system/styles/overlays.css
Keep the gradient separate from the opaque, horizontally scrollable row. Preserve existing non-sticky layouts and responsive button sizing.
src/shared/design-system/DESIGN.md
Document the gradient-only input boundary and opaque accessibility modes.
tests/browser/dialog-actions.spec.mjs
Retain the real community dialog's oversized-action, keyboard, and geometry checks on the row that now owns scrolling; add gap-wheel and scrollbar-strip hit testing.
tests/browser/dialog-footer.spec.mjs
Exercise pointer targeting, text selection, nested/portaled actions, disabled controls, keyboard access, and scrolling across shared dialog layouts and responsive conditions.
tests/fixtures/dialog-footer.html and tests/fixtures/dialog-footer.tsx
Render production shared modal components in an isolated geometry fixture; no live writes or native host are required.
Reproduction steps
Validation
Checkpoint:
6299382af3aee05f2d1fa11f03211b731bf0de64.d7ddd603fimplementation in both engines and passes with this revision.pnpm test:browser dialog-footer.spec.mjs dialog-actions.spec.mjs agent-creation-review.spec.mjs plugin-import.spec.mjs --project chromium --project webkit --no-deps --workers=2 --max-failures=2— 80 passed, 2 explicitly skipped in 2.3 minutes, at the checkpoint above with a clean working tree.pnpm exec vitest run --maxWorkers=2at the checkpoint above with a clean working tree: 17,609 passed, 22 skipped; 947 test files passed and eight were skipped (902.25 seconds).git diff --checkpassed.