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

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

14
src/pages/ClientDetailPage.tsx
View File

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

2
src/pages/DashboardPage.tsx
View File

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

2
src/pages/EmailsPage.tsx
View File

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

4
src/pages/EventsPage.tsx
View File

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

4
src/pages/SettingsPage.tsx
View File

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