From 9d40c850862788502719e38d8e081aa2a8c82b8c Mon Sep 17 00:00:00 2001
From: TurtleWolfe <TurtleWolfe@users.noreply.github.com>
Date: Wed, 29 Jul 2026 17:25:00 +0000
Subject: [PATCH] fix(#374): put the Remember-Me row on the grid and fold in
 the forgot link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Remember-Me row was a classless <div>, so it sat 168px LEFT of the two
inputs with a 310x31 empty rectangle beside it, while "Forgot password?" was
stranded below the submit button in sign-in/page.tsx on a 46px line of its own.

Both now share one row, measured at 1280 in the dev container:

  before   remember x=416          forgot  below the submit button
  after    remember x=416 top=345  forgot  x=696 top=335   sameRow=true

The ticket's "also in scope" note asks for a spacer cell so the row lands on
the input column. That was tried first and MEASURED WRONG: Remember Me (138px)
+ Forgot password (162px) = 300px against the 280px input column, so the two
wrapped onto separate lines and gave back the row this change exists to
reclaim. The row spans the full 448px column instead, which fits with room to
spare and is what the ticket's own mock draws.

flex-wrap is kept deliberately: 300px clears the 448px and 382px columns but
NOT the 288px column below 430px, nor the x-large accessibility font setting.
The link carries min-h-11 so it keeps the 44px touch target.

No spec locates that link by text — the two E2E references to forgot-password
navigate to the URL directly — so moving it retargets nothing.

The other half of this ticket, Turnstile `appearance: 'interaction-only'`, is
NOT here. Cloudflare's widget docs state no visible-attribution requirement,
but do require referencing the Turnstile Privacy Addendum in your own privacy
policy as a condition of invisible mode — and this site's privacy policy does
not mention Cloudflare or Turnstile at all today, with Turnstile already live
(#353). That is a disclosure decision for the owner, not a styling change.

Refs #374.
---
 src/app/sign-in/page.tsx                      |  8 ++----
 src/components/auth/SignInForm/SignInForm.tsx | 28 ++++++++++++++++++-
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/app/sign-in/page.tsx b/src/app/sign-in/page.tsx
index ae571d6a..87659ae9 100644
--- a/src/app/sign-in/page.tsx
+++ b/src/app/sign-in/page.tsx
@@ -48,11 +48,9 @@ export default function SignInPage() {
           }}
         />
 
-        <p className="mt-4 text-center text-sm">
-          <Link href="/forgot-password" className="link-primary">
-            Forgot password?
-          </Link>
-        </p>
+        {/* "Forgot password?" moved INTO the form, onto the Remember-Me row
+            where the convention puts it (#374). It was stranded here below the
+            submit button, costing a 46px line of its own. */}
 
         <div className="divider my-6">OR</div>
 
diff --git a/src/components/auth/SignInForm/SignInForm.tsx b/src/components/auth/SignInForm/SignInForm.tsx
index 2f1c585e..4a211e60 100644
--- a/src/components/auth/SignInForm/SignInForm.tsx
+++ b/src/components/auth/SignInForm/SignInForm.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useRef, useState } from 'react';
+import Link from 'next/link';
 import { useAuth } from '@/contexts/AuthContext';
 import CaptchaWidget, {
   type CaptchaWidgetHandle,
@@ -310,7 +311,24 @@ export default function SignInForm({
         </div>
       </div>
 
-      <div>
+      {/* #374. This row was a classless `<div>` sitting 168px LEFT of the
+          inputs with a 310x31 empty rectangle beside it, while "Forgot
+          password?" was stranded below the submit button over in
+          `sign-in/page.tsx`, costing a 46px line of its own.
+
+          The row spans the FULL 448px column rather than being indented to the
+          280px input column behind a label-width spacer. That was tried first,
+          because the ticket's "also in scope" note asks for a spacer cell — and
+          measuring it showed the two controls do not fit: Remember Me (138px)
+          + Forgot password (162px) = 300px against 280px, so they wrapped onto
+          separate lines and gave back the row this change exists to reclaim.
+          Full width fits them with room to spare, and is what the ticket's own
+          mock draws.
+
+          `flex-wrap` is still load-bearing at the narrow end: 300px clears the
+          448px and 382px columns, but NOT the 288px column below 430px, nor
+          the `x-large` accessibility font setting. */}
+      <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-3">
         <label
           htmlFor="remember-me"
           className="label cursor-pointer justify-start gap-3"
@@ -326,6 +344,14 @@ export default function SignInForm({
           />
           <span>Remember Me</span>
         </label>
+        {/* Conventionally belongs on this row, not below the submit button.
+            `min-h-11` keeps the 44px touch target the mobile gate requires. */}
+        <Link
+          href="/forgot-password"
+          className="link link-primary min-h-11 content-center text-sm"
+        >
+          Forgot password?
+        </Link>
       </div>
 
       {error && (