From 357c35d45008d090766a317cc1e190ea81bf2a8a Mon Sep 17 00:00:00 2001
From: XiaoSeS <87064762+XiaoSeS@users.noreply.github.com>
Date: Sun, 13 Sep 2026 14:34:10 +0800
Subject: [PATCH] fix(web): prevent mobile landing overflow

Signed-off-by: XiaoSeS <87064762+XiaoSeS@users.noreply.github.com>
---
 web/e2e/landing-navigation.spec.ts |  8 ++++++++
 web/src/pages/landing.tsx          | 16 ++++++++--------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/web/e2e/landing-navigation.spec.ts b/web/e2e/landing-navigation.spec.ts
index 1f96018d..91e7188c 100644
--- a/web/e2e/landing-navigation.spec.ts
+++ b/web/e2e/landing-navigation.spec.ts
@@ -23,4 +23,12 @@ test.describe('Landing Navigation (Real API)', () => {
     await page.getByRole('link', { name: 'Publish Skill' }).click()
     await expect(page).toHaveURL(/\/login\?returnTo=%2Fdashboard%2Fpublish$/)
   })
+
+  test('keeps the landing page within a 390px viewport', async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 })
+    await page.goto('/')
+
+    await expect(page.getByRole('heading', { name: 'Turn team expertise into Agent-ready skills' })).toBeVisible()
+    await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true)
+  })
 })
diff --git a/web/src/pages/landing.tsx b/web/src/pages/landing.tsx
index ca485cd7..b7141f6b 100644
--- a/web/src/pages/landing.tsx
+++ b/web/src/pages/landing.tsx
@@ -175,24 +175,24 @@ function EnterpriseSection() {
               {t('landing.experience.enterprise.deployment.description')}
             </p>
             <div className="flex-1 rounded-lg border border-border/70 bg-secondary/50 p-4">
-              <div className="mb-3 flex items-center justify-between gap-2">
-                <div className="flex flex-col gap-1.5 flex-shrink-0">
+              <div className="mb-3 flex flex-col items-stretch justify-between gap-2 sm:flex-row sm:items-center">
+                <div className="flex flex-col gap-1.5 sm:flex-shrink-0">
                   <div className="mb-0.5 text-center text-[10px] text-muted-foreground">{t('landing.experience.enterprise.clientLayer')}</div>
                   <div className="rounded-md border border-border/70 bg-background px-3 py-1.5 text-center text-[11px] font-medium text-muted-foreground">Agent</div>
                   <div className="rounded-md border border-border/70 bg-background px-3 py-1.5 text-center text-[11px] font-medium text-muted-foreground">CLI</div>
                   <div className="rounded-md border border-border/70 bg-background px-3 py-1.5 text-center text-[11px] font-medium text-muted-foreground">Web</div>
                 </div>
-                <div className="flex flex-1 items-center justify-center">
-                  <svg className="h-4 w-16 text-border" fill="none" stroke="currentColor" viewBox="0 0 64 16"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" strokeDasharray="3 3" d="M0 8h54" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M50 4l6 4-6 4" /></svg>
+                <div className="flex h-8 items-center justify-center sm:h-auto sm:min-w-0 sm:flex-1">
+                  <svg className="h-4 w-16 rotate-90 text-border sm:w-full sm:max-w-16 sm:rotate-0" fill="none" stroke="currentColor" viewBox="0 0 64 16"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" strokeDasharray="3 3" d="M0 8h54" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M50 4l6 4-6 4" /></svg>
                 </div>
-                <div className="flex flex-col items-center flex-shrink-0">
+                <div className="flex flex-col items-center sm:flex-shrink-0">
                   <div className="mb-0.5 text-center text-[10px] text-muted-foreground">{t('landing.experience.enterprise.serviceLayer')}</div>
                   <div className="rounded-lg bg-neutral-900 px-3.5 py-3 text-center text-xs font-semibold leading-tight text-white">SkillHub<br />Registry</div>
                 </div>
-                <div className="flex flex-1 items-center justify-center">
-                  <svg className="h-4 w-16 text-border" fill="none" stroke="currentColor" viewBox="0 0 64 16"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" strokeDasharray="3 3" d="M0 8h54" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M50 4l6 4-6 4" /></svg>
+                <div className="flex h-8 items-center justify-center sm:h-auto sm:min-w-0 sm:flex-1">
+                  <svg className="h-4 w-16 rotate-90 text-border sm:w-full sm:max-w-16 sm:rotate-0" fill="none" stroke="currentColor" viewBox="0 0 64 16"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" strokeDasharray="3 3" d="M0 8h54" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M50 4l6 4-6 4" /></svg>
                 </div>
-                <div className="flex flex-col gap-1.5 flex-shrink-0">
+                <div className="flex flex-col gap-1.5 sm:flex-shrink-0">
                   <div className="mb-0.5 text-center text-[10px] text-muted-foreground">{t('landing.experience.enterprise.storageLayer')}</div>
                   <div className="rounded-md border border-border/70 bg-background px-3 py-1.5 text-center text-[11px] font-medium text-muted-foreground">PostgreSQL</div>
                   <div className="rounded-md border border-border/70 bg-background px-3 py-1.5 text-center text-[11px] font-medium text-muted-foreground">Redis</div>