@@ -0,0 +1,18 @@
+---
+'@object-ui/auth': patch
+'@object-ui/app-shell': patch
+'@object-ui/console': patch
+---
+
+fix(auth): sign-in, password reset and the authenticator set-up work at phone width
+
+Clause-②: no
+Metadata-protocol: none
+
+Measured in a real Console at 375 and 390 px, against the showcase and CRM examples. No page scrolled sideways, but three things failed on a phone, and all three are fixed. Above the `sm` breakpoint nothing changes.
+
+- Every control on the sign-in, forgot-password and reset-password pages, and in the remediation overlay, was under the 44 px touch-target floor: 40 px fields and buttons, a 28 px show-password toggle, text links 14 to 17 px tall, the 32 px language button. Below `sm` each is now at least 44 px. Links inside a sentence keep their size.
+- The sign-in and forgot-password fields used 14 px text, so iOS zoomed the page each time one took focus. They use 16 px on a phone.
+- The authenticator set-up step of the remediation overlay (QR code, backup codes, code field) is taller than a phone screen once the keyboard is up, and the overlay did not scroll: the heading went off the top and the Verify button under the keyboard, out of reach. The overlay now scrolls.
+
+What to do: nothing.
@@ -44,14 +44,16 @@ export function readLegalLinks(cfg: AuthPublicConfig | null): { privacyUrl?: str
 
 export function AuthFooter({ privacyUrl, termsUrl }: { privacyUrl?: string; termsUrl?: string }) {
   const { t } = useObjectTranslation();
+  // On a phone (below `sm`) each control here is a 44 px touch target.
   const linkClass =
-    'underline-offset-4 transition-colors hover:text-foreground hover:underline focus-visible:outline-none focus-visible:underline';
+    'inline-flex min-h-[44px] min-w-[44px] items-center justify-center underline-offset-4 transition-colors hover:text-foreground hover:underline focus-visible:outline-none focus-visible:underline sm:min-h-0 sm:min-w-0';
   return (
     <div
       data-testid="auth-footer"
       className="flex min-h-8 items-center justify-between gap-3 px-1 text-xs text-muted-foreground"
     >
-      <div className="flex items-center">
+      {/* LocaleSwitcher draws a 32 px icon button; grow it to 44 px on a phone. */}
+      <div className="flex items-center max-sm:[&_button]:size-11">
         <LocaleSwitcher />
       </div>
       {privacyUrl || termsUrl ? (
 
@@ -180,7 +180,7 @@ export function AuthLayout({ children, formWidth = 'sm' }: AuthLayoutProps) {
               href={OBJECTSTACK_SITE_URL}
               target="_blank"
               rel="noopener noreferrer"
-              className="underline-offset-4 hover:text-foreground hover:underline"
+              className="inline-flex min-h-[44px] items-center underline-offset-4 hover:text-foreground hover:underline sm:min-h-0"
             >
               {t('auth.shell.poweredBy', { defaultValue: 'Powered by ObjectStack' })}
             </a>
 
@@ -440,7 +440,7 @@ function DevAdminRow({ seed }: { seed: DevSeedAdmin }) {
             onClick={signInAsDevAdmin}
             disabled={pending}
             aria-busy={pending}
-            className="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:pointer-events-none disabled:opacity-60"
+            className="inline-flex h-7 min-h-[44px] shrink-0 items-center gap-1.5 rounded-lg border sm:min-h-0 border-border bg-background px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:pointer-events-none disabled:opacity-60"
           >
             {pending ? <AuthSpinner /> : <WrenchIcon />}
             {t('auth.login.devAdminHint.signIn', { defaultValue: 'Sign in as dev admin' })}
 
@@ -24,6 +24,9 @@ import {
 } from '@object-ui/components';
 import { AuthLayout } from './AuthLayout';
 
+/** A phone (below `sm`) gets the 44 px touch-target floor; wider screens keep 40 px. */
+const PHONE_TARGET_CLASS = 'min-h-[44px] sm:min-h-0';
+
 export function ResetPasswordPage() {
   const { t } = useObjectTranslation();
   const navigate = useNavigate();
@@ -106,6 +109,7 @@ export function ResetPasswordPage() {
                 </Label>
                 <Input
                   id="new-password"
+                  className={PHONE_TARGET_CLASS}
                   type="password"
                   autoComplete="new-password"
                   required
@@ -122,6 +126,7 @@ export function ResetPasswordPage() {
                 </Label>
                 <Input
                   id="confirm-password"
+                  className={PHONE_TARGET_CLASS}
                   type="password"
                   autoComplete="new-password"
                   required
@@ -130,7 +135,7 @@ export function ResetPasswordPage() {
                   onChange={(e) => setConfirmPassword(e.target.value)}
                 />
               </div>
-              <Button type="submit" className="w-full" disabled={submitting}>
+              <Button type="submit" className={`w-full ${PHONE_TARGET_CLASS}`} disabled={submitting}>
                 {submitting
                   ? t('auth.resetPassword.submitting', { defaultValue: 'Updating…' })
                   : t('auth.resetPassword.submit', { defaultValue: 'Update password' })}
 
@@ -59,18 +59,27 @@ export function RemediationOverlay() {
   // must not be shown the impersonated user's forms as if they were their own.
   const impersonating = Boolean(exit.impersonatedBy) || exit.stopping || restored;
   return (
-    <div className="fixed inset-0 z-[200] flex items-center justify-center bg-background/95 p-4 backdrop-blur-sm">
-      <div className="w-full max-w-md rounded-xl border bg-card p-6 shadow-xl">
-        {impersonating ? (
-          <ImpersonationExitPanel exit={exit} passwordPosture={passwordPosture} />
-        ) : passwordPosture ? (
-          <ChangePasswordForm
-            forcedReset={remediationRequired.code === 'PASSWORD_RESET_REQUIRED'}
-            message={remediationRequired.message}
-          />
-        ) : (
-          <MfaEnrollForm message={remediationRequired.message} />
-        )}
+    // The overlay scrolls: on a phone the authenticator step (QR code, backup
+    // codes, code field) is taller than what the keyboard leaves of the screen,
+    // and a fixed, centred card would cut off its top and its submit button.
+    // Below `sm` every control is a 44 px touch target.
+    <div className="fixed inset-0 z-[200] overflow-y-auto bg-background/95 backdrop-blur-sm">
+      <div className="flex min-h-full items-center justify-center p-4">
+        <div
+          data-testid="remediation-card"
+          className="w-full max-w-md rounded-xl border bg-card p-6 shadow-xl max-sm:[&_button]:min-h-[44px] max-sm:[&_input]:min-h-[44px] max-sm:[&_summary]:leading-[44px]"
+        >
+          {impersonating ? (
+            <ImpersonationExitPanel exit={exit} passwordPosture={passwordPosture} />
+          ) : passwordPosture ? (
+            <ChangePasswordForm
+              forcedReset={remediationRequired.code === 'PASSWORD_RESET_REQUIRED'}
+              message={remediationRequired.message}
+            />
+          ) : (
+            <MfaEnrollForm message={remediationRequired.message} />
+          )}
+        </div>
       </div>
     </div>
   );
 
@@ -0,0 +1,61 @@
+/**
+ * The remediation overlay at phone width (objectstack#29080).
+ *
+ * The authenticator step (QR code, backup codes, code field) is taller than a
+ * phone screen once the keyboard is up. Measured at 375 x 812 the card's top
+ * sat 138 px above the screen and Verify under the keyboard, and nothing
+ * scrolled. The overlay now scrolls and centres its card inside a `min-h-full`
+ * column, and below `sm` its controls are 44 px touch targets. jsdom lays
+ * nothing out, so the classes that carry each rule are read.
+ */
+
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { I18nProvider } from '@object-ui/i18n';
+
+vi.mock('@object-ui/auth', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@object-ui/auth')>()),
+  useAuth: () => ({
+    remediationRequired: { code: 'MFA_REQUIRED', message: 'Set up an authenticator app.' },
+    setRemediationRequired: vi.fn(),
+    changePassword: vi.fn(),
+    enrollTotp: vi.fn(),
+    verifyTotp: vi.fn(),
+    signOut: vi.fn(),
+  }),
+}));
+
+import { RemediationOverlay } from '../RemediationOverlay';
+
+afterEach(cleanup);
+
+const tokens = (el: Element | null) => (el?.getAttribute('class') ?? '').split(/\s+/);
+
+describe('RemediationOverlay at phone width (objectstack#29080)', () => {
+  it('scrolls, so a card taller than the screen keeps its top and its submit reachable', () => {
+    render(
+      <I18nProvider config={{ defaultLanguage: 'en', detectBrowserLanguage: false }}>
+        <RemediationOverlay />
+      </I18nProvider>,
+    );
+    const card = screen.getByTestId('remediation-card');
+    const column = card.parentElement;
+    const overlay = column?.parentElement ?? null;
+
+    expect(tokens(overlay)).toEqual(expect.arrayContaining(['fixed', 'inset-0', 'overflow-y-auto']));
+    // A centred flex overlay clips a tall card at both ends; the column is at
+    // least the overlay's height and centres the card inside the scroll.
+    expect(tokens(overlay)).not.toContain('items-center');
+    expect(tokens(column)).toEqual(expect.arrayContaining(['flex', 'min-h-full', 'items-center']));
+
+    expect(tokens(card)).toEqual(
+      expect.arrayContaining([
+        'max-sm:[&_button]:min-h-[44px]',
+        'max-sm:[&_input]:min-h-[44px]',
+        'max-sm:[&_summary]:leading-[44px]',
+      ]),
+    );
+    // The password step is drawn inside the card.
+    expect(card.querySelector('#rem-pw')).not.toBeNull();
+  });
+});
@@ -14,6 +14,7 @@ import {
   AUTH_INPUT_CLASS,
   AUTH_LINK_CLASS,
   AUTH_PRIMARY_BUTTON_CLASS,
+  AUTH_TOUCH_TARGET_CLASS,
   AuthErrorBanner,
   AuthFormHeader,
   AuthMailIcon,
@@ -273,7 +274,7 @@ export function ForgotPasswordForm({
         />
         {loginUrl && (
           <p className="text-center text-sm text-muted-foreground">
-            <LinkComp href={loginUrl} className={AUTH_LINK_CLASS}>
+            <LinkComp href={loginUrl} className={`${AUTH_LINK_CLASS} inline-flex items-center ${AUTH_TOUCH_TARGET_CLASS}`}>
               ← {l.backToSignInText}
             </LinkComp>
           </p>
@@ -299,7 +300,7 @@ export function ForgotPasswordForm({
         />
         {loginUrl && (
           <p className="text-center text-sm text-muted-foreground">
-            <LinkComp href={loginUrl} className={AUTH_LINK_CLASS}>
+            <LinkComp href={loginUrl} className={`${AUTH_LINK_CLASS} inline-flex items-center ${AUTH_TOUCH_TARGET_CLASS}`}>
               ← {l.backToSignInText}
             </LinkComp>
           </p>
@@ -360,7 +361,7 @@ export function ForgotPasswordForm({
               type="button"
               onClick={handleSendOtp}
               disabled={otpSending || otpCooldown > 0 || !phone.trim() || resetting}
-              className="shrink-0 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium transition-colors hover:bg-accent disabled:opacity-50"
+              className={`shrink-0 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium transition-colors hover:bg-accent disabled:opacity-50 ${AUTH_TOUCH_TARGET_CLASS}`}
             >
               {otpSending && <AuthSpinner />}
               {otpCooldown > 0
@@ -399,7 +400,7 @@ export function ForgotPasswordForm({
         <button
           type="button"
           onClick={() => switchMode('email')}
-          className="w-full text-center text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline"
+          className={`w-full text-center text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline ${AUTH_TOUCH_TARGET_CLASS}`}
         >
           {l.useEmailResetText}
         </button>
@@ -434,7 +435,7 @@ export function ForgotPasswordForm({
           <button
             type="button"
             onClick={() => switchMode('phone')}
-            className="w-full text-center text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline"
+            className={`w-full text-center text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline ${AUTH_TOUCH_TARGET_CLASS}`}
           >
             {l.usePhoneResetText}
           </button>
 
@@ -16,6 +16,7 @@ import {
   AUTH_INPUT_CLASS,
   AUTH_LINK_CLASS,
   AUTH_PRIMARY_BUTTON_CLASS,
+  AUTH_TOUCH_TARGET_CLASS,
   AuthErrorBanner,
   AuthFormHeader,
   AuthSpinner,
@@ -522,7 +523,7 @@ export function LoginForm({
                 type="button"
                 onClick={handleSendOtp}
                 disabled={otpSending || otpCooldown > 0 || !phone.trim() || isLoading}
-                className="shrink-0 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium transition-colors hover:bg-accent disabled:opacity-50"
+                className={`shrink-0 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium transition-colors hover:bg-accent disabled:opacity-50 ${AUTH_TOUCH_TARGET_CLASS}`}
               >
                 {otpSending && <AuthSpinner />}
                 {otpCooldown > 0
@@ -544,7 +545,7 @@ export function LoginForm({
           <button
             type="button"
             onClick={() => switchMode('password')}
-            className="w-full text-center text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline"
+            className={`w-full text-center text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline ${AUTH_TOUCH_TARGET_CLASS}`}
           >
             {l.usePasswordSignInText}
           </button>
@@ -584,7 +585,7 @@ export function LoginForm({
               {forgotPasswordUrl && (
                 <LinkComp
                   href={forgotPasswordUrl}
-                  className="text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline"
+                  className={`inline-flex items-center text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline ${AUTH_TOUCH_TARGET_CLASS}`}
                 >
                   {l.forgotPasswordText}
                 </LinkComp>
@@ -600,7 +601,7 @@ export function LoginForm({
                 required
                 autoComplete="current-password"
                 disabled={isLoading}
-                className={`${AUTH_INPUT_CLASS} pr-10`}
+                className={`${AUTH_INPUT_CLASS} pr-12 sm:pr-10`}
               />
               <button
                 type="button"
@@ -611,7 +612,7 @@ export function LoginForm({
                 aria-label={passwordVisible ? l.hidePasswordText : l.showPasswordText}
                 aria-controls="login-password"
                 disabled={isLoading}
-                className="absolute right-1.5 top-1/2 inline-flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:pointer-events-none disabled:opacity-50"
+                className="absolute right-0 top-1/2 inline-flex size-11 -translate-y-1/2 sm:right-1.5 sm:size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:pointer-events-none disabled:opacity-50"
               >
                 {passwordVisible ? <EyeOffIcon /> : <EyeIcon />}
               </button>
@@ -633,7 +634,7 @@ export function LoginForm({
               onClick={handleSso}
               disabled={isLoading || ssoSubmitting}
               aria-busy={ssoSubmitting}
-              className="flex h-10 w-full items-center justify-center gap-2 rounded-lg border border-input bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent disabled:opacity-50"
+              className={`flex h-10 w-full items-center justify-center gap-2 rounded-lg border border-input bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent disabled:opacity-50 ${AUTH_TOUCH_TARGET_CLASS}`}
             >
               {ssoSubmitting && <AuthSpinner />}
               {l.ssoButton}
@@ -644,7 +645,7 @@ export function LoginForm({
             <button
               type="button"
               onClick={() => switchMode('phone-otp')}
-              className="w-full text-center text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline"
+              className={`w-full text-center text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline ${AUTH_TOUCH_TARGET_CLASS}`}
             >
               {l.usePhoneOtpText}
             </button>
@@ -656,7 +657,7 @@ export function LoginForm({
             <button
               type="button"
               onClick={() => setShowPasswordFallback(false)}
-              className="w-full text-center text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline"
+              className={`w-full text-center text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline ${AUTH_TOUCH_TARGET_CLASS}`}
             >
               {l.backToSsoText}
             </button>
@@ -672,7 +673,7 @@ export function LoginForm({
             <button
               type="button"
               onClick={() => setShowPasswordFallback(true)}
-              className="w-full text-center text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline"
+              className={`w-full text-center text-xs text-muted-foreground underline-offset-4 transition-colors hover:text-primary hover:underline ${AUTH_TOUCH_TARGET_CLASS}`}
             >
               {l.usePasswordText}
             </button>
Original file line number	Diff line number	Diff line change
`@@ -180,7 +180,7 @@ export function AuthLayout({ children, formWidth = 'sm' }: AuthLayoutProps) {`
`180`	`180`	`href={OBJECTSTACK_SITE_URL}`
`181`	`181`	`target="_blank"`
`182`	`182`	`rel="noopener noreferrer"`
`183`		`- className="underline-offset-4 hover:text-foreground hover:underline"`
	`183`	`+ className="inline-flex min-h-[44px] items-center underline-offset-4 hover:text-foreground hover:underline sm:min-h-0"`
`184`	`184`	`>`
`185`	`185`	`{t('auth.shell.poweredBy', { defaultValue: 'Powered by ObjectStack' })}`
`186`	`186`	`</a>`
Original file line number	Diff line number	Diff line change
`@@ -440,7 +440,7 @@ function DevAdminRow({ seed }: { seed: DevSeedAdmin }) {`
`440`	`440`	`onClick={signInAsDevAdmin}`
`441`	`441`	`disabled={pending}`
`442`	`442`	`aria-busy={pending}`
`443`		`- className="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:pointer-events-none disabled:opacity-60"`
	`443`	`+ className="inline-flex h-7 min-h-[44px] shrink-0 items-center gap-1.5 rounded-lg border sm:min-h-0 border-border bg-background px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 disabled:pointer-events-none disabled:opacity-60"`
`444`	`444`	`>`
`445`	`445`	`{pending ? <AuthSpinner /> : <WrenchIcon />}`
`446`	`446`	`{t('auth.login.devAdminHint.signIn', { defaultValue: 'Sign in as dev admin' })}`