fix(widget): FAB dodges interactive controls on narrow viewports - #450
Merged
Conversation
At 320px the fixed corner launcher sat directly on the /auth GitHub sign-in button (and pricing CTAs) — max z-index, so it steals the tap on the one control a signup needs. data-fc-bottom only helps hosts that know their own layout, so the widget now hit-tests the stack under the FAB (elementsFromPoint, shadow host excluded) and steps upward 16px at a time until nothing tappable is beneath it, capped at 12 steps. Runs at mount, after hydration settles, on resize, and when scrolling settles; ≤480px only, and the host's data-fc-bottom stays the base. Proven against the live orangecat /auth page at 320×800 by route-intercepting widget.js with this build: FAB lands at bottom:160px, zero overlap with the GitHub button; at 1280px the host's 80px offset is preserved untouched. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018RmMktaYn8MuJdEqjp5gWU
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
1 participant
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.
Visitor-inbox AI review (orangecat /auth, 320×800): the feedback FAB sits on the GitHub sign-in button's corner and — being max z-index — steals the tap. orangecat's own #852 raised it via
data-fc-bottom=80, but at 320×800 that still overlaps by 9px, and every host page has its own corner content (pricing CTAs, modal rows).So the widget now defends itself: on viewports ≤480px it hit-tests the stack under the FAB (
elementsFromPoint, shadow host excluded) and steps upward 16px at a time until nothing tappable is beneath, capped at 12 steps. Runs at mount, after hydration settles (800ms), on resize, and when scrolling settles. The host'sdata-fc-bottomstays the base; >480px behavior is unchanged.Proven against the live orangecat /auth page by route-intercepting
widget.jswith this build in Playwright at 320×800: FAB lands atbottom:160px, zero overlap with the GitHub button (was 9px overlap with prod widget). At 1280px the host's 80px offset is preserved untouched.Full
npm run verifygreen locally (pre-push hook).🤖 Generated with Claude Code
https://claude.ai/code/session_018RmMktaYn8MuJdEqjp5gWU