From 11a92a4b1bf5ddf1d4b4497fd83fed1e501d6278 Mon Sep 17 00:00:00 2001
From: Matteo <keysersoft@gmail.com>
Date: Sat, 3 Oct 2026 13:59:05 +0200
Subject: [PATCH] iOS offers the emailed verification code; empty connector
 list fits a phone

- Code field: autocomplete=one-time-code, so iOS (codes from Apple Mail)
  and Android show the code above the keyboard.
- Verification email subject starts with the code.
- The empty connector list's three buttons wrap instead of spilling out
  of the card on both sides (mobile test added).
---
 .../backend/src/settings/email.service.ts     |  4 ++-
 packages/frontend/src/app/connectors/page.tsx |  2 +-
 packages/frontend/src/app/login/page.tsx      |  4 +++
 packages/frontend/tests/e2e/mobile.spec.ts    | 25 +++++++++++++++++++
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/backend/src/settings/email.service.ts b/packages/backend/src/settings/email.service.ts
index e9bd1be9..086f728b 100644
--- a/packages/backend/src/settings/email.service.ts
+++ b/packages/backend/src/settings/email.service.ts
@@ -392,7 +392,9 @@ export class EmailService {
         await transport.transporter.sendMail({
           from: transport.from,
           to,
-          subject: 'Verify Your Email — AnythingMCP',
+          // Code first: it is what the inbox preview shows, and what iOS
+          // reads to offer it above the keyboard (autocomplete one-time-code).
+          subject: `${code} is your AnythingMCP verification code`,
           html: `
             <div style="font-family: system-ui, sans-serif; max-width: 480px; margin: 0 auto; padding: 24px;">
               <h2 style="color: #2563eb;">Verify Your Email</h2>
diff --git a/packages/frontend/src/app/connectors/page.tsx b/packages/frontend/src/app/connectors/page.tsx
index d3b42141..83881f55 100644
--- a/packages/frontend/src/app/connectors/page.tsx
+++ b/packages/frontend/src/app/connectors/page.tsx
@@ -403,7 +403,7 @@ export default function ConnectorsPage() {
           <p className="mb-6 text-xs text-[var(--text-3)]">
             Supports {SUPPORTED_TYPES.map((t) => t.label).join(', ')}
           </p>
-          <div className="flex items-center justify-center gap-3">
+          <div className="flex flex-wrap items-center justify-center gap-3">
             <Link href="/connectors/new" className={cn(buttonVariants({ variant: 'primary', size: 'md' }))}>
               <PlusIcon />
               Add Connector
diff --git a/packages/frontend/src/app/login/page.tsx b/packages/frontend/src/app/login/page.tsx
index 1f204db1..ed6ec476 100644
--- a/packages/frontend/src/app/login/page.tsx
+++ b/packages/frontend/src/app/login/page.tsx
@@ -470,6 +470,10 @@ function LoginForm() {
               <input
                 type="text"
                 inputMode="numeric"
+                // Lets iOS and Android offer the code from the email (Apple
+                // Mail) or a message right above the keyboard.
+                autoComplete="one-time-code"
+                name="one-time-code"
                 maxLength={6}
                 value={verificationCode}
                 onChange={(e) => setVerificationCode(e.target.value.replace(/\D/g, ''))}
diff --git a/packages/frontend/tests/e2e/mobile.spec.ts b/packages/frontend/tests/e2e/mobile.spec.ts
index a8bdff37..db62d884 100644
--- a/packages/frontend/tests/e2e/mobile.spec.ts
+++ b/packages/frontend/tests/e2e/mobile.spec.ts
@@ -280,6 +280,31 @@ test.describe('phone layout has no horizontal overflow', () => {
     expect(o.main, '<main> with tool editor').toBeLessThanOrEqual(o.vw);
   });
 
+  /**
+   * The empty connector list centres three buttons in one row. On a phone
+   * the row was wider than the card and spilled out on both sides; centred
+   * content that overflows to the left does not widen the page, so the
+   * document checks above cannot see it. Check each button instead.
+   */
+  test('empty connector list keeps its buttons on screen', async ({ page }) => {
+    await fakeSession(page);
+    await page.route(/\/api\/connectors$/, (route) =>
+      route.fulfill({ status: 200, contentType: 'application/json', body: '[]' }),
+    );
+    await page.goto('/connectors');
+    await page.getByText('No connectors yet').waitFor();
+    await shot(page, '/connectors-empty');
+
+    const vw = page.viewportSize()!.width;
+    const card = page.getByText('No connectors yet').locator('xpath=ancestor::div[contains(@class,"border-dashed")][1]');
+    for (const name of ['Add Connector', 'Browse Adapters', 'Import from Backup']) {
+      const box = await card.getByText(name, { exact: true }).boundingBox();
+      expect(box, name).not.toBeNull();
+      expect(box!.x, `${name} left edge`).toBeGreaterThanOrEqual(0);
+      expect(box!.x + box!.width, `${name} right edge`).toBeLessThanOrEqual(vw);
+    }
+  });
+
   test('audit log expands a row without overflowing', async ({ page }) => {
     await fakeSession(page);
     await page.goto('/logs');