From dda38204fa5bcaf5b12ba42392966cccd5342efc Mon Sep 17 00:00:00 2001
From: isra el <vernu1997@gmail.com>
Date: Sat, 11 Jul 2026 07:27:04 +0300
Subject: [PATCH] fix: eliminate mobile horizontal overflow and add
 scroll-width e2e guard

Root causes of the sideways-scroll blank strip at 375px:
- fixed-width auth cards (w-[400px]/w-[450px]) -> w-full + max-w so they
  shrink on small screens
- min-w-[500px] on the community-links dialog -> removed
- webhooks section header: two w-full buttons in a non-wrapping flex row
  (403px wide) -> stacks on mobile
- devices/api-keys cards blown past the grid track by min-content sizing
  -> min-w-0 max-w-full on the cards
- api-guide SyntaxHighlighter blocks get overflowX auto + maxWidth 100%
- safety net: overflow-x clip on body

Adds e2e/mobile-overflow.spec.ts: at 375px, scrollWidth must not exceed the
viewport on home, messaging, webhooks, account, and login. This guard caught
the webhooks-header and card offenders during the fix.

Build, 25 unit tests, and 11 e2e green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../request-password-reset-form.tsx           |  2 +-
 .../(components)/reset-password-form.tsx      |  2 +-
 web/app/(app)/(auth)/login/page.tsx           |  2 +-
 web/app/(app)/(auth)/register/page.tsx        |  2 +-
 .../(app)/dashboard/(components)/api-keys.tsx |  2 +-
 .../(components)/community-links.tsx          |  2 +-
 .../dashboard/(components)/device-list.tsx    |  2 +-
 .../webhooks/webhooks-section.tsx             |  2 +-
 .../messaging/(components)/api-guide.tsx      |  4 ++
 web/e2e/mobile-overflow.spec.ts               | 46 +++++++++++++++++++
 web/styles/main.css                           |  2 +
 11 files changed, 60 insertions(+), 8 deletions(-)
 create mode 100644 web/e2e/mobile-overflow.spec.ts

diff --git a/web/app/(app)/(auth)/(components)/request-password-reset-form.tsx b/web/app/(app)/(auth)/(components)/request-password-reset-form.tsx
index 24c80af..371da5d 100644
--- a/web/app/(app)/(auth)/(components)/request-password-reset-form.tsx
+++ b/web/app/(app)/(auth)/(components)/request-password-reset-form.tsx
@@ -100,7 +100,7 @@ export default function RequestPasswordResetForm() {
 
   return (
     <div className='flex items-center justify-center min-h-screen bg-gray-100 dark:bg-muted'>
-      <Card className='w-[400px] shadow-lg'>
+      <Card className='w-full max-w-[400px] shadow-lg'>
         <CardHeader className='space-y-1'>
           <CardTitle className='text-2xl font-bold text-center'>
             Reset your password
diff --git a/web/app/(app)/(auth)/(components)/reset-password-form.tsx b/web/app/(app)/(auth)/(components)/reset-password-form.tsx
index 54ef108..22ca41e 100644
--- a/web/app/(app)/(auth)/(components)/reset-password-form.tsx
+++ b/web/app/(app)/(auth)/(components)/reset-password-form.tsx
@@ -82,7 +82,7 @@ export default function ResetPasswordForm({
 
   return (
     <div className='flex items-center justify-center min-h-screen bg-gray-100 dark:bg-muted'>
-      <Card className='w-[400px] shadow-lg'>
+      <Card className='w-full max-w-[400px] shadow-lg'>
         <CardHeader className='space-y-1'>
           <CardTitle className='text-2xl font-bold text-center'>
             Reset your password
diff --git a/web/app/(app)/(auth)/login/page.tsx b/web/app/(app)/(auth)/login/page.tsx
index 8daa396..38c034c 100644
--- a/web/app/(app)/(auth)/login/page.tsx
+++ b/web/app/(app)/(auth)/login/page.tsx
@@ -22,7 +22,7 @@ export default function LoginPage() {
 
   return (
     <div className='flex items-center justify-center min-h-screen bg-gray-100 dark:bg-muted'>
-      <Card className='w-[400px] shadow-lg'>
+      <Card className='w-full max-w-[400px] shadow-lg'>
         <CardHeader className='space-y-1'>
           <CardTitle className='text-2xl font-bold text-center'>
             Welcome back
diff --git a/web/app/(app)/(auth)/register/page.tsx b/web/app/(app)/(auth)/register/page.tsx
index a63cbaa..255e929 100644
--- a/web/app/(app)/(auth)/register/page.tsx
+++ b/web/app/(app)/(auth)/register/page.tsx
@@ -21,7 +21,7 @@ export default function RegisterPage() {
 
   return (
     <div className='flex items-center justify-center min-h-screen bg-gray-100 dark:bg-muted'>
-      <Card className='w-[450px] shadow-lg'>
+      <Card className='w-full max-w-[450px] shadow-lg'>
         <CardHeader className='space-y-1'>
           <CardTitle className='text-2xl font-bold text-center'>
             Create an account
diff --git a/web/app/(app)/dashboard/(components)/api-keys.tsx b/web/app/(app)/dashboard/(components)/api-keys.tsx
index 45c8652..60a0f82 100644
--- a/web/app/(app)/dashboard/(components)/api-keys.tsx
+++ b/web/app/(app)/dashboard/(components)/api-keys.tsx
@@ -126,7 +126,7 @@ export default function ApiKeys() {
   return (
     <>
       <GenerateApiKey ref={addApiKeyRef} showTrigger={false} />
-      <Card>
+      <Card className='min-w-0 max-w-full'>
         <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
           <CardTitle className='text-lg'>API Keys</CardTitle>
           <div className='flex items-center gap-1'>
diff --git a/web/app/(app)/dashboard/(components)/community-links.tsx b/web/app/(app)/dashboard/(components)/community-links.tsx
index 34f0e89..3bfdb47 100644
--- a/web/app/(app)/dashboard/(components)/community-links.tsx
+++ b/web/app/(app)/dashboard/(components)/community-links.tsx
@@ -203,7 +203,7 @@ export default function CommunityLinks() {
         </Card>
       </div>
       <Dialog open={socialOpen} onOpenChange={setSocialOpen}>
-        <DialogContent className='sm:max-w-[600px] min-w-[500px] text-base'>
+        <DialogContent className='sm:max-w-[600px] text-base'>
           <DialogHeader>
             <DialogTitle className='text-primary mb-2 text-2xl font-bold'>
               Share textbee.dev with Others
diff --git a/web/app/(app)/dashboard/(components)/device-list.tsx b/web/app/(app)/dashboard/(components)/device-list.tsx
index 7bdf825..a4c7e25 100644
--- a/web/app/(app)/dashboard/(components)/device-list.tsx
+++ b/web/app/(app)/dashboard/(components)/device-list.tsx
@@ -106,7 +106,7 @@ export default function DeviceList() {
   return (
     <>
       <GenerateApiKey ref={addDeviceKeyRef} showTrigger={false} />
-      <Card>
+      <Card className='min-w-0 max-w-full'>
         <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-2'>
           <CardTitle className='text-lg'>Registered Devices</CardTitle>
           <Button
diff --git a/web/app/(app)/dashboard/(components)/webhooks/webhooks-section.tsx b/web/app/(app)/dashboard/(components)/webhooks/webhooks-section.tsx
index 558a8df..c18c613 100644
--- a/web/app/(app)/dashboard/(components)/webhooks/webhooks-section.tsx
+++ b/web/app/(app)/dashboard/(components)/webhooks/webhooks-section.tsx
@@ -83,7 +83,7 @@ export default function WebhooksSection() {
             up to {MAX_WEBHOOKS_PER_USER} webhooks.
           </p>
         </div>
-        <div className='flex gap-x-4'>
+        <div className='flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:gap-x-4'>
           <Button
             onClick={handleCreateClick}
             disabled={reachedLimit || isLoading}
diff --git a/web/app/(app)/dashboard/messaging/(components)/api-guide.tsx b/web/app/(app)/dashboard/messaging/(components)/api-guide.tsx
index 5251ee7..1e418d9 100644
--- a/web/app/(app)/dashboard/messaging/(components)/api-guide.tsx
+++ b/web/app/(app)/dashboard/messaging/(components)/api-guide.tsx
@@ -353,6 +353,8 @@ print(response.json())`
                                   fontSize: '0.875rem',
                                   lineHeight: '1.5',
                                   backgroundColor: '#1e293b', // slate-800
+                                  overflowX: 'auto',
+                                  maxWidth: '100%',
                                 }}
                               >
                                 {data.code}
@@ -391,6 +393,8 @@ print(response.json())`
                             fontSize: '0.875rem',
                             lineHeight: '1.5',
                             backgroundColor: '#1e293b', // slate-800
+                            overflowX: 'auto',
+                            maxWidth: '100%',
                           }}
                         >
                           {endpoint.response.code}
diff --git a/web/e2e/mobile-overflow.spec.ts b/web/e2e/mobile-overflow.spec.ts
new file mode 100644
index 0000000..f298746
--- /dev/null
+++ b/web/e2e/mobile-overflow.spec.ts
@@ -0,0 +1,46 @@
+import { expect, test } from '@playwright/test'
+import { authenticate } from './session'
+import { mockApi } from './mock-api'
+
+// Regression guard for mobile horizontal overflow: at 375px no page may be
+// wider than the viewport (the bug showed a blank strip when scrolling right).
+// document.scrollingElement covers the page; body scrollWidth catches clipped
+// overflow introduced inside the layout.
+
+const AUTHED_PAGES = [
+  '/dashboard',
+  '/dashboard/messaging',
+  '/dashboard/webhooks',
+  '/dashboard/account',
+]
+
+async function expectNoHorizontalScroll(page: import('@playwright/test').Page) {
+  const { scrollWidth, innerWidth } = await page.evaluate(() => ({
+    scrollWidth: document.documentElement.scrollWidth,
+    innerWidth: window.innerWidth,
+  }))
+  expect(scrollWidth, 'page must not scroll sideways at 375px').toBeLessThanOrEqual(
+    innerWidth
+  )
+}
+
+test.describe('no horizontal overflow at 375px (mocked API)', () => {
+  test.use({ viewport: { width: 375, height: 800 } })
+
+  for (const path of AUTHED_PAGES) {
+    test(`authed page ${path}`, async ({ page, context }) => {
+      await authenticate(context)
+      await mockApi(page)
+      await page.goto(path)
+      await page.waitForLoadState('networkidle')
+      await expectNoHorizontalScroll(page)
+    })
+  }
+
+  test('login page', async ({ page }) => {
+    await mockApi(page)
+    await page.goto('/login')
+    await page.waitForLoadState('networkidle')
+    await expectNoHorizontalScroll(page)
+  })
+})
diff --git a/web/styles/main.css b/web/styles/main.css
index 07ff3ad..5d14746 100644
--- a/web/styles/main.css
+++ b/web/styles/main.css
@@ -184,6 +184,8 @@
     color: hsl(var(--foreground));
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
+    /* Safety net: an oversized element must never widen the page sideways. */
+    overflow-x: clip;
   }
 }