From e030917fcdd0b0bc8388c7ac3d3ebf0183a765a6 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 25 May 2026 21:43:54 -0700
Subject: [PATCH] =?UTF-8?q?fix(website):=20mobile=20viewport=20fixes=20?=
 =?UTF-8?q?=E2=80=94=20overflow,=20touch=20targets,=20autocomplete?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/website/src/app/global.css                        | 10 ++++++++++
 apps/website/src/components/contact/ContactForm.tsx    |  3 +++
 apps/website/src/components/landing/Differentiator.tsx |  2 +-
 .../website/src/components/landing/WhitePaperBlock.tsx |  1 +
 apps/website/src/components/pricing/LeadForm.tsx       |  3 +++
 apps/website/src/components/shared/Footer.tsx          |  1 +
 apps/website/src/components/shared/Nav.tsx             | 10 +++++++++-
 7 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/app/global.css b/apps/website/src/app/global.css
index 0f668257..76cafccf 100644
--- a/apps/website/src/app/global.css
+++ b/apps/website/src/app/global.css
@@ -11,6 +11,16 @@ body {
   font-family: var(--font-inter);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+}
+
+/* Long unbreakable tokens (e.g. package names like @threadplane/chat,
+ * file paths like app.config.ts) live inside marketing headings and pull
+ * the layout wider than the viewport on narrow phones. Allow breaking
+ * within these tokens to prevent horizontal overflow. */
+h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 /* Scroll-triggered fade-in for server components */
diff --git a/apps/website/src/components/contact/ContactForm.tsx b/apps/website/src/components/contact/ContactForm.tsx
index 3715867d..56bfe8f8 100644
--- a/apps/website/src/components/contact/ContactForm.tsx
+++ b/apps/website/src/components/contact/ContactForm.tsx
@@ -107,6 +107,7 @@ export function ContactForm() {
         Email
         <input
           type="email"
+          autoComplete="email"
           required
           value={email}
           onChange={(e) => setEmail(e.target.value)}
@@ -117,6 +118,7 @@ export function ContactForm() {
         Name <span style={{ color: tokens.colors.textMuted }}>(optional)</span>
         <input
           type="text"
+          autoComplete="name"
           value={name}
           onChange={(e) => setName(e.target.value)}
           style={inputStyle}
@@ -126,6 +128,7 @@ export function ContactForm() {
         Company <span style={{ color: tokens.colors.textMuted }}>(optional)</span>
         <input
           type="text"
+          autoComplete="organization"
           value={company}
           onChange={(e) => setCompany(e.target.value)}
           style={inputStyle}
diff --git a/apps/website/src/components/landing/Differentiator.tsx b/apps/website/src/components/landing/Differentiator.tsx
index 361e7abf..b8cbfe75 100644
--- a/apps/website/src/components/landing/Differentiator.tsx
+++ b/apps/website/src/components/landing/Differentiator.tsx
@@ -155,7 +155,7 @@ export function Differentiator() {
                   flexWrap: 'wrap',
                 }}
               >
-                <div style={{ flex: '1 1 360px', minWidth: 0 }}>
+                <div style={{ flex: '1 1 200px', minWidth: 0 }}>
                   <span
                     style={{
                       fontFamily: tokens.typography.body.family,
diff --git a/apps/website/src/components/landing/WhitePaperBlock.tsx b/apps/website/src/components/landing/WhitePaperBlock.tsx
index 8e0fda59..a7425dbf 100644
--- a/apps/website/src/components/landing/WhitePaperBlock.tsx
+++ b/apps/website/src/components/landing/WhitePaperBlock.tsx
@@ -168,6 +168,7 @@ export function WhitePaperBlock({ paper = 'overview' }: WhitePaperBlockProps = {
                 <input
                   id="wp-email"
                   type="email"
+                  autoComplete="email"
                   placeholder="you@company.com"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
diff --git a/apps/website/src/components/pricing/LeadForm.tsx b/apps/website/src/components/pricing/LeadForm.tsx
index 5ce38165..c3d81672 100644
--- a/apps/website/src/components/pricing/LeadForm.tsx
+++ b/apps/website/src/components/pricing/LeadForm.tsx
@@ -220,6 +220,7 @@ export function LeadForm() {
                   <input
                     id="lf-name"
                     name="name"
+                    autoComplete="name"
                     aria-label="Name"
                     placeholder="Name"
                     required
@@ -232,6 +233,7 @@ export function LeadForm() {
                     id="lf-email"
                     name="email"
                     type="email"
+                    autoComplete="email"
                     aria-label="Work email"
                     placeholder="Work email"
                     required
@@ -243,6 +245,7 @@ export function LeadForm() {
                   <input
                     id="lf-company"
                     name="company"
+                    autoComplete="organization"
                     aria-label="Company"
                     placeholder="Company"
                     required
diff --git a/apps/website/src/components/shared/Footer.tsx b/apps/website/src/components/shared/Footer.tsx
index be3ab597..4db6b8bd 100644
--- a/apps/website/src/components/shared/Footer.tsx
+++ b/apps/website/src/components/shared/Footer.tsx
@@ -70,6 +70,7 @@ function NewsletterForm() {
       <input
         id="footer-email"
         type="email"
+        autoComplete="email"
         placeholder="Email address"
         value={email}
         onChange={e => setEmail(e.target.value)}
diff --git a/apps/website/src/components/shared/Nav.tsx b/apps/website/src/components/shared/Nav.tsx
index d0b1e6ab..1a82e0fe 100644
--- a/apps/website/src/components/shared/Nav.tsx
+++ b/apps/website/src/components/shared/Nav.tsx
@@ -176,7 +176,15 @@ export function Nav() {
           className="lg:hidden"
           onClick={() => { setOpen(!open); if (!open) setMobileTab(isDocsPage ? 'docs' : 'site'); }}
           aria-label={open ? 'Close menu' : 'Open menu'}
-          style={{ color: tokens.colors.textPrimary }}>
+          style={{
+            color: tokens.colors.textPrimary,
+            // Expand hit area to >=44x44 without shifting visual layout.
+            padding: 12,
+            margin: -12,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
           {open ? <CloseIcon /> : <MenuIcon />}
         </button>
       </div>