From 55fce1f362831bdce355ee3c45e06a1278d708e5 Mon Sep 17 00:00:00 2001
From: Mao Nakamoto <maonakamoto@users.noreply.github.com>
Date: Sat, 29 Aug 2026 11:50:16 +0000
Subject: [PATCH] fix(auth): clear the mobile feedback FAB from the OAuth
 sign-in row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/app/auth/AuthSocialLogin.tsx |  6 +++++-
 src/app/auth/page.tsx            | 11 ++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/app/auth/AuthSocialLogin.tsx b/src/app/auth/AuthSocialLogin.tsx
index a28ed420c..dbd33c5d3 100644
--- a/src/app/auth/AuthSocialLogin.tsx
+++ b/src/app/auth/AuthSocialLogin.tsx
@@ -37,7 +37,11 @@ export function AuthSocialLogin({ mode, setMode, loading, onOAuthSignIn }: AuthS
       {/* OAuth providers only. Anonymous sign-in is now the lead CTA above the
           email form (anonymous-first onboarding), so there's no secondary
           anonymous link here. */}
-      <div className="mt-6">
+      {/* max-[359px]:mt-3 — on the narrowest phones this is the row that
+          lands under the fixed FleetCrown feedback FAB (bottom-right); a
+          tighter top margin here is the last of a few narrow-viewport-only
+          trims (see page.tsx) that lift it clear. */}
+      <div className="mt-6 max-[359px]:mt-3">
         {/* Social providers — only rendered for providers the server has
             enabled (see useEnabledOAuthProviders). When none are enabled the
             whole "Or continue with" block is omitted so users only ever see
diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
index 79620594a..6dd8df100 100644
--- a/src/app/auth/page.tsx
+++ b/src/app/auth/page.tsx
@@ -66,7 +66,7 @@ export default function AuthPage() {
     <div className="min-h-screen bg-surface-raised/40 dark:bg-surface-page flex flex-col lg:flex-row">
       <AuthHeroPanel />
 
-      <div className="flex-1 flex flex-col justify-center items-center p-8 lg:p-12 bg-surface-raised/40 dark:bg-surface-page">
+      <div className="flex-1 flex flex-col justify-center items-center p-8 max-[359px]:pt-4 lg:p-12 bg-surface-raised/40 dark:bg-surface-page">
         {/* Mobile-only back link — the desktop hero panel hosts the same
             link but is hidden below lg. Without this, mobile users have
             no non-browser escape from the form. */}
@@ -78,7 +78,12 @@ export default function AuthPage() {
           Back to home
         </Link>
         <div className="w-full max-w-md">
-          <div className="text-center mb-8">
+          {/* max-[359px] trims below: on the narrowest phones this form's last
+              row (OAuth buttons) lands under the FleetCrown feedback FAB
+              (fixed bottom-right). Compacting non-essential vertical rhythm
+              here — never touch-target sizes — clears it without a layout
+              rewrite. */}
+          <div className="text-center mb-8 max-[359px]:mb-4">
             <h2 className="text-2xl font-semibold mb-2 text-fg-primary">
               {mode === 'login'
                 ? 'Welcome back'
@@ -139,7 +144,7 @@ export default function AuthPage() {
               by default is a core principle — let people start with zero friction
               and add an email later. Email/social remain right below. */}
           {mode !== 'forgot' && (
-            <div className="mb-6">
+            <div className="mb-6 max-[359px]:mb-3">
               <Button
                 type="button"
                 variant="accent"