From b23e5ef801a4ad151ccbc35d6badb6c774081b92 Mon Sep 17 00:00:00 2001
From: Hammer <hammer7839283@gmail.com>
Date: Wed, 28 Jan 2026 21:14:45 +0000
Subject: [PATCH] fix: improve mobile responsiveness across all pages

---
 src/components/ClientForm.tsx  | 10 +++++-----
 src/components/Modal.tsx       |  6 +++---
 src/pages/ClientDetailPage.tsx | 14 +++++++-------
 src/pages/DashboardPage.tsx    |  2 +-
 src/pages/EmailsPage.tsx       |  2 +-
 src/pages/EventsPage.tsx       |  4 ++--
 src/pages/SettingsPage.tsx     |  4 ++--
 7 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/ClientForm.tsx b/src/components/ClientForm.tsx
index 462a11a..121af71 100644
--- a/src/components/ClientForm.tsx
+++ b/src/components/ClientForm.tsx
@@ -71,7 +71,7 @@ export default function ClientForm({ initialData, onSubmit, loading }: ClientFor
   return (
     <form onSubmit={handleSubmit} className="space-y-5">
       {/* Name */}
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
           <label className={labelClass}>First Name *</label>
           <input required value={form.firstName} onChange={(e) => update('firstName', e.target.value)} className={inputClass} />
@@ -83,7 +83,7 @@ export default function ClientForm({ initialData, onSubmit, loading }: ClientFor
       </div>
 
       {/* Contact */}
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
           <label className={labelClass}>Email</label>
           <input type="email" value={form.email} onChange={(e) => update('email', e.target.value)} className={inputClass} />
@@ -95,7 +95,7 @@ export default function ClientForm({ initialData, onSubmit, loading }: ClientFor
       </div>
 
       {/* Company */}
-      <div className="grid grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
         <div>
           <label className={labelClass}>Company</label>
           <input value={form.company} onChange={(e) => update('company', e.target.value)} className={inputClass} />
@@ -115,7 +115,7 @@ export default function ClientForm({ initialData, onSubmit, loading }: ClientFor
         <label className={labelClass}>Street</label>
         <input value={form.street} onChange={(e) => update('street', e.target.value)} className={inputClass} />
       </div>
-      <div className="grid grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
         <div>
           <label className={labelClass}>City</label>
           <input value={form.city} onChange={(e) => update('city', e.target.value)} className={inputClass} />
@@ -131,7 +131,7 @@ export default function ClientForm({ initialData, onSubmit, loading }: ClientFor
       </div>
 
       {/* Dates */}
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
           <label className={labelClass}>Birthday</label>
           <input type="date" value={form.birthday} onChange={(e) => update('birthday', e.target.value)} className={inputClass} />
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 344eab6..3001eee 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -26,13 +26,13 @@ export default function Modal({ isOpen, onClose, title, children, size = 'md' }:
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
       <div className="absolute inset-0 bg-black/40" onClick={onClose} />
       <div className={cn(
-        'relative bg-white rounded-xl shadow-xl w-full max-h-[85vh] flex flex-col animate-fade-in',
+        'relative bg-white rounded-xl shadow-xl w-full max-h-[85vh] flex flex-col animate-fade-in mx-2 sm:mx-0',
         size === 'sm' && 'max-w-md',
         size === 'md' && 'max-w-lg',
         size === 'lg' && 'max-w-2xl',
         size === 'xl' && 'max-w-4xl',
       )}>
-        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-200">
+        <div className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-slate-200">
           <h2 className="text-lg font-semibold text-slate-900">{title}</h2>
           <button
             onClick={onClose}
@@ -41,7 +41,7 @@ export default function Modal({ isOpen, onClose, title, children, size = 'md' }:
             <X className="w-5 h-5" />
           </button>
         </div>
-        <div className="flex-1 overflow-auto px-6 py-4">
+        <div className="flex-1 overflow-auto px-4 sm:px-6 py-4">
           {children}
         </div>
       </div>
diff --git a/src/pages/ClientDetailPage.tsx b/src/pages/ClientDetailPage.tsx
index dcc6cb5..adccedf 100644
--- a/src/pages/ClientDetailPage.tsx
+++ b/src/pages/ClientDetailPage.tsx
@@ -67,16 +67,16 @@ export default function ClientDetailPage() {
   return (
     <div className="max-w-4xl mx-auto space-y-6 animate-fade-in">
       {/* Header */}
-      <div className="flex items-start gap-4">
+      <div className="flex flex-col sm:flex-row items-start gap-4">
         <button onClick={() => navigate('/clients')} className="mt-1 p-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors">
           <ArrowLeft className="w-5 h-5" />
         </button>
-        <div className="flex-1">
+        <div className="flex-1 min-w-0">
           <div className="flex items-center gap-4">
-            <div className="w-16 h-16 bg-blue-100 text-blue-700 rounded-2xl flex items-center justify-center text-xl font-bold">
+            <div className="w-16 h-16 bg-blue-100 text-blue-700 rounded-2xl flex items-center justify-center text-xl font-bold flex-shrink-0">
               {getInitials(client.firstName, client.lastName)}
             </div>
-            <div className="flex-1">
+            <div className="flex-1 min-w-0">
               <h1 className="text-2xl font-bold text-slate-900">
                 {client.firstName} {client.lastName}
               </h1>
@@ -93,14 +93,14 @@ export default function ClientDetailPage() {
             </div>
           </div>
         </div>
-        <div className="flex gap-2">
+        <div className="flex flex-wrap gap-2">
           <button onClick={handleMarkContacted} className="flex items-center gap-2 px-3 py-2 bg-emerald-50 text-emerald-700 rounded-lg text-sm font-medium hover:bg-emerald-100 transition-colors">
             <CheckCircle2 className="w-4 h-4" />
-            Contacted
+            <span className="hidden sm:inline">Contacted</span>
           </button>
           <button onClick={() => setShowCompose(true)} className="flex items-center gap-2 px-3 py-2 bg-blue-50 text-blue-700 rounded-lg text-sm font-medium hover:bg-blue-100 transition-colors">
             <Sparkles className="w-4 h-4" />
-            Generate Email
+            <span className="hidden sm:inline">Generate Email</span>
           </button>
           <button onClick={() => setShowEdit(true)} className="p-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors">
             <Edit3 className="w-4 h-4" />
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index 0f8214c..3bdcc34 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -42,7 +42,7 @@ export default function DashboardPage() {
 
   return (
     <div className="max-w-6xl mx-auto space-y-6 animate-fade-in">
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between flex-wrap gap-3">
         <div>
           <h1 className="text-2xl font-bold text-slate-900">Dashboard</h1>
           <p className="text-slate-500 text-sm mt-1">Welcome back. Here's your overview.</p>
diff --git a/src/pages/EmailsPage.tsx b/src/pages/EmailsPage.tsx
index 64737fc..2df85f4 100644
--- a/src/pages/EmailsPage.tsx
+++ b/src/pages/EmailsPage.tsx
@@ -64,7 +64,7 @@ export default function EmailsPage() {
 
   return (
     <div className="max-w-4xl mx-auto space-y-5 animate-fade-in">
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between flex-wrap gap-3">
         <div>
           <h1 className="text-2xl font-bold text-slate-900">Emails</h1>
           <p className="text-slate-500 text-sm mt-1">AI-generated emails for your network</p>
diff --git a/src/pages/EventsPage.tsx b/src/pages/EventsPage.tsx
index a16ba50..3ba181a 100644
--- a/src/pages/EventsPage.tsx
+++ b/src/pages/EventsPage.tsx
@@ -51,7 +51,7 @@ export default function EventsPage() {
 
   return (
     <div className="max-w-4xl mx-auto space-y-5 animate-fade-in">
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between flex-wrap gap-3">
         <div>
           <h1 className="text-2xl font-bold text-slate-900">Events</h1>
           <p className="text-slate-500 text-sm mt-1">{events.length} events tracked</p>
@@ -204,7 +204,7 @@ function CreateEventModal({ isOpen, onClose, clients, onCreate }: {
           <label className="block text-sm font-medium text-slate-700 mb-1">Title *</label>
           <input required value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} className={inputClass} />
         </div>
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
           <div>
             <label className="block text-sm font-medium text-slate-700 mb-1">Type</label>
             <select value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value as any })} className={inputClass}>
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index 55639a0..27c176f 100644
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -59,7 +59,7 @@ export default function SettingsPage() {
             </div>
           </div>
 
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
               <label className={labelClass}>Name</label>
               <input
@@ -78,7 +78,7 @@ export default function SettingsPage() {
             </div>
           </div>
 
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
               <label className={labelClass}>Title</label>
               <input