fix: resolve mobile menu issues, responsiveness, and routing errors (#60)

maskedsyntax · web-flow · commit f15d5f32e0ed · 2026-02-10T19:32:49.000+05:30
- 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
diff --git 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
@@ -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;
+    }
   }
 </style>
diff --git 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;
     }
   }
 </style>
diff --git 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
@@ -13,6 +13,12 @@
 
   function closeMobile() {
     mobileOpen = false;
+    document.body.style.overflow = '';
+  }
+
+  function toggleMobile() {
+    mobileOpen = !mobileOpen;
+    document.body.style.overflow = mobileOpen ? 'hidden' : '';
   }
 </script>
 
@@ -34,9 +40,10 @@
 
       <button
         class="mobile-toggle mobile-only"
-        onclick={() => mobileOpen = !mobileOpen}
+        onclick={toggleMobile}
         aria-label="Toggle menu"
         aria-expanded={mobileOpen}
+        type="button"
       >
         {#if mobileOpen}
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
@@ -50,21 +57,21 @@
       </button>
     </div>
   </div>
+</nav>
 
-  {#if mobileOpen}
-    <div class="mobile-menu mobile-only">
-      <div class="mobile-menu-inner">
-        {#each navLinks as link}
-          <a href={link.href} class="mobile-link" onclick={closeMobile}>{link.label}</a>
-        {/each}
-        <hr />
-        <a href="/docs#installation" class="btn btn-primary mobile-cta">
-          Get Started
-        </a>
-      </div>
+{#if mobileOpen}
+  <div class="mobile-menu">
+    <div class="mobile-menu-inner">
+      {#each navLinks as link}
+        <a href={link.href} class="mobile-link" onclick={closeMobile}>{link.label}</a>
+      {/each}
+      <hr />
+      <a href="/docs#installation" class="btn btn-primary mobile-cta">
+        Get Started
+      </a>
     </div>
-  {/if}
-</nav>
+  </div>
+{/if}
 
 <style>
   .navbar {
@@ -78,13 +85,19 @@
     -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--nav-border);
     height: var(--nav-height);
+    width: 100%;
+    max-width: 100vw;
+    overflow: visible;
   }
 
   .navbar-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 100%;
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
   }
 
   .nav-links {
@@ -111,6 +124,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
+    flex-shrink: 0;
   }
 
   .btn {
@@ -140,30 +154,53 @@
     justify-content: center;
     width: 36px;
     height: 36px;
+    min-width: 36px;
     color: var(--text-secondary);
     border-radius: var(--radius-sm);
+    flex-shrink: 0;
+    cursor: pointer;
   }
 
   .mobile-toggle:hover {
     background: var(--bg-tertiary);
   }
 
   .mobile-menu {
-    position: fixed;
-    top: var(--nav-height);
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--bg-primary);
-    z-index: 99;
-    overflow-y: auto;
+    position: fixed !important;
+    top: var(--nav-height) !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    background: var(--bg-primary) !important;
+    z-index: 999 !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    -webkit-overflow-scrolling: touch;
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  /* Hide on desktop */
+  @media (min-width: 769px) {
+    .mobile-menu {
+      display: none !important;
+    }
   }
 
   .mobile-menu-inner {
-    display: flex;
-    flex-direction: column;
-    padding: 16px;
-    gap: 4px;
+    display: flex !important;
+    flex-direction: column !important;
+    padding: 16px !important;
+    gap: 4px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    min-height: 200px !important;
   }
 
   .mobile-link {
@@ -173,6 +210,8 @@
     color: var(--text-secondary);
     border-radius: var(--radius-sm);
     transition: background var(--transition-fast);
+    display: block;
+    text-decoration: none;
   }
 
   .mobile-link:hover {
@@ -201,12 +240,24 @@
   }
 
   @media (max-width: 768px) {
+    .navbar-inner {
+      padding: 0 12px;
+    }
+
     .desktop-only {
       display: none !important;
     }
 
     .mobile-only {
       display: flex;
     }
+
+    .mobile-menu {
+      display: block !important;
+    }
+
+    .nav-actions {
+      gap: 4px;
+    }
   }
 </style>
diff --git a/web/src/routes/docs/+page.svelte b/web/src/routes/docs/+page.svelte
diff --git a/web/svelte.config.js b/web/svelte.config.js

Original file line number	Diff line number	Diff line change
`@@ -78,6 +78,9 @@`
`78`	`78`	`align-items: center;`
`79`	`79`	`gap: 40px;`
`80`	`80`	`padding: 0 24px;`
	`81`	`+ width: 100%;`
	`82`	`+ max-width: 100%;`
	`83`	`+ box-sizing: border-box;`
`81`	`84`	`}`
`82`	`85`
`83`	`86`	`.badge {`
`@@ -257,6 +260,10 @@`
`257`	`260`	`padding-bottom: 56px;`
`258`	`261`	`}`
`259`	`262`
	`263`	`+ .hero-inner {`
	`264`	`+ padding: 0 16px;`
	`265`	`+ }`
	`266`	`+`
`260`	`267`	`.hero-br {`
`261`	`268`	`display: none;`
`262`	`269`	`}`
`@@ -274,5 +281,10 @@`
`274`	`281`	`.terminal-body {`
`275`	`282`	`padding: 12px;`
`276`	`283`	`}`
	`284`	`+`
	`285`	`+ .hero-terminal {`
	`286`	`+ max-width: 100%;`
	`287`	`+ margin: 0 8px;`
	`288`	`+ }`
`277`	`289`	`}`
`278`	`290`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,8 @@`
`21`	`21`	`align-items: center;`
`22`	`22`	`gap: 8px;`
`23`	`23`	`text-decoration: none;`
	`24`	`+ flex-shrink: 0;`
	`25`	`+ min-width: 0;`
`24`	`26`	`}`
`25`	`27`
`26`	`28`	`.logo-text {`