From c60384d4b19afb36ba7dc99568cf2286929865f4 Mon Sep 17 00:00:00 2001
From: Daniel <daniel@danvics.com>
Date: Sun, 5 Apr 2026 01:26:33 +0200
Subject: [PATCH] Fix landing page mobile responsiveness
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Feature cards: minmax(300px) → minmax(min(100%,280px)) to stack on mobile
- AI Scribe section: hardcoded 1fr 1fr → auto-fit responsive grid
- 6 icon boxes: hardcoded 1fr 1fr → auto-fit with 130px min
- Feature list: add overflow-wrap to prevent text overflow
- Contact form: name/email fields stack on narrow screens

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/LandingPage.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/LandingPage.jsx b/frontend/src/pages/LandingPage.jsx
index 42af2e7..8597be7 100644
--- a/frontend/src/pages/LandingPage.jsx
+++ b/frontend/src/pages/LandingPage.jsx
@@ -100,7 +100,7 @@ function ContactForm() {
 
   return (
     <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 200px), 1fr))', gap: 12 }}>
         <div>
           <label style={{ display: 'block', fontSize: '0.82rem', fontWeight: 600, marginBottom: 5, color: 'var(--text-muted)' }}>Name</label>
           <input
@@ -413,7 +413,7 @@ export default function LandingPage() {
             Built specifically for pediatric board prep and clinical learning.
           </p>
         </div>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))', gap: 20 }}>
           {FEATURES.map((f, i) => (
             <div key={i} className="card" style={{ padding: '24px', transition: 'transform 0.2s, box-shadow 0.2s' }}
               onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.12)' }}
@@ -429,7 +429,7 @@ export default function LandingPage() {
 
       {/* ── AI Scribe section ──────────────────────────────────────────────── */}
       <section style={{ background: 'var(--navbar-bg)', color: 'var(--navbar-fg)', padding: '80px 24px' }}>
-        <div style={{ maxWidth: 1000, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
+        <div style={{ maxWidth: 1000, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: 40, alignItems: 'center' }}>
           <div>
             <div style={{ display: 'inline-block', background: 'rgba(96,165,250,0.15)', border: '1px solid rgba(96,165,250,0.3)', borderRadius: 20, padding: '4px 14px', fontSize: '0.78rem', fontWeight: 600, color: '#93c5fd', marginBottom: 20, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
               Also from PedsHub
@@ -442,7 +442,7 @@ export default function LandingPage() {
               age-specific well visit workflows, developmental milestones, vaccine schedules,
               catch-up planners, and automatic ICD-10 billing codes — all in one tool.
             </p>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32 }}>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32, overflow: 'hidden' }}>
               {[
                 '🩺 Well visit planner from newborn through adolescence',
                 '📋 Developmental milestone tracking across 4 domains',
@@ -450,8 +450,8 @@ export default function LandingPage() {
                 '🎙 AI scribe — speak, get a structured note',
                 '💊 Automatic ICD-10 and CPT billing codes',
               ].map((item, i) => (
-                <div key={i} style={{ fontSize: '0.88rem', color: '#cbd5e1', display: 'flex', gap: 8, alignItems: 'flex-start' }}>
-                  <span style={{ flexShrink: 0 }}>{item}</span>
+                <div key={i} style={{ fontSize: '0.88rem', color: '#cbd5e1', display: 'flex', gap: 8, alignItems: 'flex-start', overflowWrap: 'break-word', wordBreak: 'break-word', minWidth: 0 }}>
+                  <span>{item}</span>
                 </div>
               ))}
             </div>
@@ -465,7 +465,7 @@ export default function LandingPage() {
               Open AI Scribe ↗
             </a>
           </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 130px), 1fr))', gap: 10 }}>
             {[
               { icon: '📅', label: 'Well Visits', sub: '2wk → 18yr' },
               { icon: '🧠', label: 'Milestones', sub: '2mo → 5yr' },
@@ -477,7 +477,7 @@ export default function LandingPage() {
               <div key={i} style={{
                 background: 'rgba(255,255,255,0.05)',
                 border: '1px solid rgba(255,255,255,0.08)',
-                borderRadius: 10, padding: '16px',
+                borderRadius: 10, padding: '14px',
                 transition: 'background 0.2s',
               }}
                 onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.09)'}