fix: improve mobile responsiveness across all pages

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" />

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>

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>

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}>

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