hammer/network-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve mobile responsiveness across all pages

Browse Source
This commit is contained in:
Hammer
2026-01-28 21:14:45 +00:00
parent 0198348494
commit b23e5ef801
7 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/ClientForm.tsx
View File

@@ -71,7 +71,7 @@ export default function ClientForm({ initialData, onSubmit, loading }: ClientFor
return ( return (
<form onSubmit={handleSubmit} className="space-y-5"> <form onSubmit={handleSubmit} className="space-y-5">
{/* Name */} {/* Name */}
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<label className={labelClass}>First Name *</label> <label className={labelClass}>First Name *</label>
<input required value={form.firstName} onChange={(e) => update('firstName', e.target.value)} className={inputClass} /> <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> </div>
{/* Contact */} {/* Contact */}
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<label className={labelClass}>Email</label> <label className={labelClass}>Email</label>
<input type="email" value={form.email} onChange={(e) => update('email', e.target.value)} className={inputClass} /> <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> </div>
{/* Company */} {/* Company */}
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div> <div>
<label className={labelClass}>Company</label> <label className={labelClass}>Company</label>
<input value={form.company} onChange={(e) => update('company', e.target.value)} className={inputClass} /> <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> <label className={labelClass}>Street</label>
<input value={form.street} onChange={(e) => update('street', e.target.value)} className={inputClass} /> <input value={form.street} onChange={(e) => update('street', e.target.value)} className={inputClass} />
</div> </div>
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div> <div>
<label className={labelClass}>City</label> <label className={labelClass}>City</label>
<input value={form.city} onChange={(e) => update('city', e.target.value)} className={inputClass} /> <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> </div>
{/* Dates */} {/* Dates */}
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<label className={labelClass}>Birthday</label> <label className={labelClass}>Birthday</label>
<input type="date" value={form.birthday} onChange={(e) => update('birthday', e.target.value)} className={inputClass} /> <input type="date" value={form.birthday} onChange={(e) => update('birthday', e.target.value)} className={inputClass} />

6
src/components/Modal.tsx
View File

@@ -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="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/40" onClick={onClose} /> <div className="absolute inset-0 bg-black/40" onClick={onClose} />
<div className={cn( <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 === 'sm' && 'max-w-md',
size === 'md' && 'max-w-lg', size === 'md' && 'max-w-lg',
size === 'lg' && 'max-w-2xl', size === 'lg' && 'max-w-2xl',
size === 'xl' && 'max-w-4xl', 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> <h2 className="text-lg font-semibold text-slate-900">{title}</h2>
<button <button
onClick={onClose} onClick={onClose}
@@ -41,7 +41,7 @@ export default function Modal({ isOpen, onClose, title, children, size = 'md' }:
<X className="w-5 h-5" /> <X className="w-5 h-5" />
</button> </button>
</div> </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} {children}
</div> </div>
</div> </div>

14
src/pages/ClientDetailPage.tsx
View File

@@ -67,16 +67,16 @@ export default function ClientDetailPage() {
return ( return (
<div className="max-w-4xl mx-auto space-y-6 animate-fade-in"> <div className="max-w-4xl mx-auto space-y-6 animate-fade-in">
{/* Header */} {/* 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"> <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" /> <ArrowLeft className="w-5 h-5" />
</button> </button>
<div className="flex-1"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-4"> <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)} {getInitials(client.firstName, client.lastName)}
</div> </div>
<div className="flex-1"> <div className="flex-1 min-w-0">
<h1 className="text-2xl font-bold text-slate-900"> <h1 className="text-2xl font-bold text-slate-900">
{client.firstName} {client.lastName} {client.firstName} {client.lastName}
</h1> </h1>
@@ -93,14 +93,14 @@ export default function ClientDetailPage() {
</div> </div>
</div> </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"> <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" /> <CheckCircle2 className="w-4 h-4" />
Contacted <span className="hidden sm:inline">Contacted</span>
</button> </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"> <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" /> <Sparkles className="w-4 h-4" />
Generate Email <span className="hidden sm:inline">Generate Email</span>
</button> </button>
<button onClick={() => setShowEdit(true)} className="p-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors"> <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" /> <Edit3 className="w-4 h-4" />

2
src/pages/DashboardPage.tsx
View File

@@ -42,7 +42,7 @@ export default function DashboardPage() {
return ( return (
<div className="max-w-6xl mx-auto space-y-6 animate-fade-in"> <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> <div>
<h1 className="text-2xl font-bold text-slate-900">Dashboard</h1> <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> <p className="text-slate-500 text-sm mt-1">Welcome back. Here's your overview.</p>

2
src/pages/EmailsPage.tsx
View File

@@ -64,7 +64,7 @@ export default function EmailsPage() {
return ( return (
<div className="max-w-4xl mx-auto space-y-5 animate-fade-in"> <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> <div>
<h1 className="text-2xl font-bold text-slate-900">Emails</h1> <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> <p className="text-slate-500 text-sm mt-1">AI-generated emails for your network</p>

4
src/pages/EventsPage.tsx
View File

@@ -51,7 +51,7 @@ export default function EventsPage() {
return ( return (
<div className="max-w-4xl mx-auto space-y-5 animate-fade-in"> <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> <div>
<h1 className="text-2xl font-bold text-slate-900">Events</h1> <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> <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> <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} /> <input required value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} className={inputClass} />
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-1">Type</label> <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}> <select value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value as any })} className={inputClass}>

4
src/pages/SettingsPage.tsx
View File

@@ -59,7 +59,7 @@ export default function SettingsPage() {
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<label className={labelClass}>Name</label> <label className={labelClass}>Name</label>
<input <input
@@ -78,7 +78,7 @@ export default function SettingsPage() {
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div> <div>
<label className={labelClass}>Title</label> <label className={labelClass}>Title</label>
<input <input