From 40082b9be17797656e11519bf0c7622de361d147 Mon Sep 17 00:00:00 2001 From: maskedsyntax Date: Tue, 10 Feb 2026 19:30:43 +0530 Subject: [PATCH] fix: resolve mobile menu issues, responsiveness, and routing errors - Fix mobile menu auto-closing by removing conflicting event handlers - Remove global document listeners (mousedown/touchstart) that caused double-toggling - Simplify toggle logic to use single onclick handler - Remove unnecessary preventDefault/stopPropagation calls - Move menu outside nav element to prevent overflow clipping - Improve mobile responsiveness across components - Add overflow-x: hidden to html, body, and main elements - Fix horizontal scrolling issues on mobile devices - Adjust container widths and padding for mobile breakpoints - Fix HowItWorks section code blocks to wrap properly on small screens - Ensure navbar and mobile menu respect viewport constraints - Fix 404 error on /docs page reload - Add fallback: 'index.html' to adapter-static configuration - Enables client-side routing for static builds on Vercel - Fix 500 error from Svelte 5 syntax incompatibility - Remove mixed event handler syntax (on:touchstart) - Use consistent Svelte 5 event handler format - Update build output directory to 'dist' for Vercel compatibility - Change from 'build' to 'dist' in svelte.config.js - Update .gitignore to include dist directory --- web/src/app.css | 14 +++ web/src/lib/components/Hero.svelte | 12 +++ web/src/lib/components/HowItWorks.svelte | 42 ++++++++- web/src/lib/components/Logo.svelte | 2 + web/src/lib/components/Navbar.svelte | 103 +++++++++++++++++------ web/src/routes/docs/+page.svelte | 20 ++++- web/svelte.config.js | 2 +- 7 files changed, 165 insertions(+), 30 deletions(-) diff --git a/web/src/app.css b/web/src/app.css index d83edeb..e342abf 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -139,6 +139,8 @@ body { -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition-base), color var(--transition-base); position: relative; + overflow-x: hidden; + max-width: 100vw; } body::before { @@ -181,6 +183,7 @@ code, pre { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; + box-sizing: border-box; } @media (max-width: 640px) { @@ -189,6 +192,17 @@ code, pre { } } +/* Prevent horizontal overflow */ +html, body { + overflow-x: hidden; + max-width: 100vw; +} + +main { + overflow-x: hidden; + max-width: 100%; +} + /* ---- Typography Scale ---- */ h1, h2, h3, h4, h5, h6 { line-height: 1.1; diff --git a/web/src/lib/components/Hero.svelte b/web/src/lib/components/Hero.svelte index 8c260b7..404e657 100644 --- a/web/src/lib/components/Hero.svelte +++ b/web/src/lib/components/Hero.svelte @@ -78,6 +78,9 @@ align-items: center; gap: 40px; padding: 0 24px; + width: 100%; + max-width: 100%; + box-sizing: border-box; } .badge { @@ -257,6 +260,10 @@ padding-bottom: 56px; } + .hero-inner { + padding: 0 16px; + } + .hero-br { display: none; } @@ -274,5 +281,10 @@ .terminal-body { padding: 12px; } + + .hero-terminal { + max-width: 100%; + margin: 0 8px; + } } diff --git a/web/src/lib/components/HowItWorks.svelte b/web/src/lib/components/HowItWorks.svelte index 7351331..20e775f 100644 --- a/web/src/lib/components/HowItWorks.svelte +++ b/web/src/lib/components/HowItWorks.svelte @@ -63,6 +63,8 @@ max-width: 440px; margin: 16px auto 0; font-size: 1.05rem; + padding: 0 16px; + box-sizing: border-box; } .steps-grid { @@ -80,6 +82,10 @@ border: 1px solid var(--border-secondary); border-radius: var(--radius-md); transition: border-color var(--transition-fast); + width: 100%; + max-width: 100%; + box-sizing: border-box; + overflow: hidden; } .step-card:hover { @@ -111,18 +117,28 @@ border: 1px solid var(--code-border); border-radius: var(--radius-sm); overflow-x: auto; + overflow-y: hidden; + width: 100%; + max-width: 100%; + box-sizing: border-box; + -webkit-overflow-scrolling: touch; } .step-command code { font-size: 0.78rem; color: var(--code-text); - white-space: nowrap; + white-space: pre; + display: block; + word-break: break-word; + overflow-wrap: break-word; } .step-description { font-size: 0.875rem; line-height: 1.65; color: var(--text-secondary); + word-wrap: break-word; + overflow-wrap: break-word; } @media (max-width: 1024px) { @@ -131,20 +147,42 @@ gap: 16px; max-width: 520px; margin: 0 auto; + width: 100%; } } @media (max-width: 640px) { .how-it-works { padding: 64px 0; + overflow-x: hidden; } .section-header { margin-bottom: 40px; + padding: 0 16px; } .step-card { - padding: 22px; + padding: 20px 16px; + min-width: 0; + } + + .step-command { + padding: 8px 10px; + } + + .step-command code { + font-size: 0.7rem; + white-space: pre-wrap; + word-break: break-all; + } + + .step-title { + font-size: 1.1rem; + } + + .step-description { + font-size: 0.8rem; } } diff --git a/web/src/lib/components/Logo.svelte b/web/src/lib/components/Logo.svelte index 8b1a621..5a5cd0b 100644 --- a/web/src/lib/components/Logo.svelte +++ b/web/src/lib/components/Logo.svelte @@ -21,6 +21,8 @@ align-items: center; gap: 8px; text-decoration: none; + flex-shrink: 0; + min-width: 0; } .logo-text { diff --git a/web/src/lib/components/Navbar.svelte b/web/src/lib/components/Navbar.svelte index 2ac5a17..84f885c 100644 --- a/web/src/lib/components/Navbar.svelte +++ b/web/src/lib/components/Navbar.svelte @@ -13,6 +13,12 @@ function closeMobile() { mobileOpen = false; + document.body.style.overflow = ''; + } + + function toggleMobile() { + mobileOpen = !mobileOpen; + document.body.style.overflow = mobileOpen ? 'hidden' : ''; } @@ -34,9 +40,10 @@ + - {#if mobileOpen} -
-
- {#each navLinks as link} - {link.label} - {/each} -
- - Get Started - -
+{#if mobileOpen} +
+
+ {#each navLinks as link} + {link.label} + {/each} +
+ + Get Started +
- {/if} - +
+{/if} diff --git a/web/src/routes/docs/+page.svelte b/web/src/routes/docs/+page.svelte index 7681cb4..f356f39 100644 --- a/web/src/routes/docs/+page.svelte +++ b/web/src/routes/docs/+page.svelte @@ -387,6 +387,8 @@ summary = analyzer.analyze() diff --git a/web/svelte.config.js b/web/svelte.config.js index e73f890..2ecf26e 100644 --- a/web/svelte.config.js +++ b/web/svelte.config.js @@ -8,7 +8,7 @@ const config = { adapter: adapter({ pages: 'dist', assets: 'dist', - fallback: undefined, + fallback: 'index.html', precompress: false, strict: true })