Skip to content

fix(auth): clear the mobile feedback FAB from the OAuth sign-in row - #852

Merged
github-actions[bot] merged 1 commit into
mainfrom
fix/auth-mobile-fab-oauth-overlap
Aug 29, 2026
Merged

fix(auth): clear the mobile feedback FAB from the OAuth sign-in row#852
github-actions[bot] merged 1 commit into
mainfrom
fix/auth-mobile-fab-oauth-overlap

Conversation

@catomean

Copy link
Copy Markdown
Collaborator

Summary

  • Visitor feedback on https://orangecat.ch/auth?mode=login&from=%2Fmessages (where every logged-out /messages visitor lands): at 320×800, the Sign in with GitHub button's bottom-right corner sits under the fixed FleetCrown feedback FAB (#fleetcrown-feedback-host, bottom:16 right:16, 48px, max z-index) — the FAB steals the tap. Cost: signups on the sign-in page.
  • The widget itself is an external embed (fleetcrown.orangecat.ch/widget.js, loaded once in layout.tsx) — not in this repo, so its own positioning isn't something this PR can change or verify.
  • Root cause on our side: below ~360px, the heading text wraps onto more lines, making the page ~45–70px taller and pushing the OAuth button row into the FAB's fixed screen-corner on the very first, unscrolled paint — reproduced exactly: visitor measured the GitHub button at x166-288/y701-745; a Playwright repro against the real page (with /api/auth/oauth-providers mocked to render the OAuth row, since this sandbox has no live provider config) landed it at the identical x166-288/y701-745, overlapping the FAB's y736-784 band by 9px.
  • Fix: trimmed non-essential vertical rhythm above the OAuth row — heading margin, anonymous-CTA block margin, outer top padding, OAuth-block top margin — scoped to max-[359px]: only (an arbitrary Tailwind variant, no tailwind.config.ts change). No touch-target sizes changed. Viewports ≥360px are untouched (and were never affected — the overlap is a narrow-viewport-only artifact of text reflow).

Test plan

  • npx tsc --noEmit — clean
  • npx eslint src/app/auth/page.tsx src/app/auth/AuthSocialLogin.tsx — clean
  • Full local npm run test:unit (2638 tests) and full pre-push suite — green
  • Playwright measurement against the real running page at 320×800 (OAuth-providers API mocked to render Google/GitHub, since no live provider config exists in this sandbox): GitHub button before fix at x166-288/y701-745 (9px vertical overlap with the FAB's y736-784 reserved corner) → after fix at x166-288/y645-689, 47px clear.
  • Re-checked at 320/359/360/375/390/430px: clear at every width; 360px+ renders byte-for-byte the same as before this change (the compaction only applies under 360px) and was already clear pre-fix, confirming no regression on normal phone widths.
  • Could not load the real widget script (no network path to fleetcrown.orangecat.ch + no FLEETCROWN_FEEDBACK_TOKEN in this sandbox) or real OAuth provider config — verification used a same-geometry synthetic overlay for the FAB and a mocked provider-list response; both are documented above with exact before/after coordinates so the numbers are checkable against the live site.

🤖 Generated with Claude Code

Visitor feedback on /auth?mode=login: at 320x800 the GitHub sign-in
button's bottom-right corner sat under the fixed FleetCrown feedback
FAB (bottom-right, 48px, max z-index), which steals the tap — costing
signups on the page every logged-out /messages visitor lands on.

The widget itself isn't in this repo (external embed), so the fix is
on our side: below 360px, text wrapping in the heading makes the page
~45px taller, pushing the OAuth row into the FAB's fixed corner.
Trimmed non-essential vertical rhythm (never touch-target sizes) with
max-[359px] variants so the row lands with ~47px clearance. Verified
with Playwright at 320/359/360/375/390/430px — clear at every width,
identical to before at 360px+ where it was never a problem.
@github-actions
github-actions Bot merged commit e31fcf5 into main Aug 29, 2026
6 checks passed
@github-actions
github-actions Bot deleted the fix/auth-mobile-fab-oauth-overlap branch August 29, 2026 21:02
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.

1 participant