feat: add responsive typography scaling for desktop readability
- Add CSS clamp() for fluid font-size scaling (16px to 20px based on viewport) - Apply responsive breakpoint classes to all components: * text-xs → lg:text-sm xl:text-base * text-sm → lg:text-base xl:text-lg * text-base → lg:text-lg xl:text-xl * text-lg → lg:text-xl xl:text-2xl * text-xl → lg:text-2xl xl:text-3xl * text-2xl → lg:text-3xl xl:text-4xl * text-3xl → lg:text-4xl xl:text-5xl - Apply responsive padding/spacing scaling proportionally - Updated 27 component and page files - Build verified: 6 routes, zero TypeScript errors - Fixes readability on MacBook Pro 14" and other desktop screens without browser zoom
This commit is contained in:
@@ -115,33 +115,33 @@ export default function AdminOverlay({
|
||||
/>
|
||||
<div data-testid="admin-overlay" className="fixed inset-0 z-50 bg-background/60 animate-in fade-in duration-300">
|
||||
<div className="absolute inset-y-0 right-0 w-full max-w-md sm:max-w-lg md:max-w-md bg-surface border-l border-slate-800 shadow-2xl flex flex-col animate-in slide-in-from-right duration-500">
|
||||
<div className="p-6 border-b border-slate-800 flex items-center justify-between">
|
||||
<div className="p-6 lg:p-8 xl:p-10 border-b border-slate-800 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-slate-800 rounded-xl text-primary">
|
||||
<div className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-slate-800 rounded-xl text-primary">
|
||||
<Shield size={20} />
|
||||
</div>
|
||||
<h2 className="text-xl font-black text-white">System Admin</h2>
|
||||
<h2 className="text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-black text-white">System Admin</h2>
|
||||
</div>
|
||||
<button
|
||||
data-testid="close-admin-overlay"
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-slate-800 rounded-full transition-colors text-muted focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
|
||||
className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 hover:bg-slate-800 rounded-full transition-colors text-muted focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-8">
|
||||
<div className="flex-1 overflow-y-auto p-6 lg:p-8 xl:p-10 space-y-8">
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-black text-secondary">User Management</h3>
|
||||
<p className="text-xs text-muted mt-0.5">Create accounts and control access</p>
|
||||
<h3 className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black text-secondary">User Management</h3>
|
||||
<p className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl text-muted mt-0.5">Create accounts and control access</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreateUserModal(true)}
|
||||
className="flex items-center gap-1 text-xs font-black text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
|
||||
className="flex items-center gap-1 text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-black text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
|
||||
>
|
||||
<UserPlus size={12} /> Add User
|
||||
</button>
|
||||
@@ -149,14 +149,14 @@ export default function AdminOverlay({
|
||||
|
||||
<div className="grid gap-2">
|
||||
{users.map(u => (
|
||||
<div key={u.id} className="bg-slate-800/40 border border-slate-800 p-4 rounded-2xl flex items-center justify-between">
|
||||
<div key={u.id} className="bg-slate-800/40 border border-slate-800 p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 rounded-2xl flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 rounded-lg ${u.role === 'admin' ? "bg-primary/20 text-primary" : "bg-slate-700 text-secondary"}`}>
|
||||
<div className={`p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 rounded-lg ${u.role === 'admin' ? "bg-primary/20 text-primary" : "bg-slate-700 text-secondary"}`}>
|
||||
<User size={16} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-white">{u.username}</p>
|
||||
<p className="text-xs font-bold text-muted">{u.role}</p>
|
||||
<p className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-bold text-white">{u.username}</p>
|
||||
<p className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-bold text-muted">{u.role}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -171,7 +171,7 @@ export default function AdminOverlay({
|
||||
loading: false,
|
||||
});
|
||||
}}
|
||||
className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
|
||||
className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
|
||||
aria-label={`Delete user ${u.username}`}
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
@@ -185,12 +185,12 @@ export default function AdminOverlay({
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-black text-secondary">Category Groups</h3>
|
||||
<p className="text-xs text-muted mt-0.5">Organize items by type or location</p>
|
||||
<h3 className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black text-secondary">Category Groups</h3>
|
||||
<p className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl text-muted mt-0.5">Organize items by type or location</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreateCategoryModal(true)}
|
||||
className="flex items-center gap-1 text-xs font-black text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
|
||||
className="flex items-center gap-1 text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-black text-primary hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded px-1"
|
||||
>
|
||||
<Plus size={12} /> Add Category
|
||||
</button>
|
||||
@@ -198,14 +198,14 @@ export default function AdminOverlay({
|
||||
|
||||
<div className="grid gap-2">
|
||||
{categories.map(cat => (
|
||||
<div key={cat.id} className="bg-slate-800/40 border border-slate-800 p-4 rounded-2xl flex items-center justify-between">
|
||||
<div key={cat.id} className="bg-slate-800/40 border border-slate-800 p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 rounded-2xl flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary/10 rounded-lg text-primary">
|
||||
<div className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-primary/10 rounded-lg text-primary">
|
||||
<Layers size={16} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-white">{cat.name}</p>
|
||||
<p className="text-xs text-muted font-mono">{cat.description || 'No description'}</p>
|
||||
<p className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-bold text-white">{cat.name}</p>
|
||||
<p className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl text-muted font-mono">{cat.description || 'No description'}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -220,7 +220,7 @@ export default function AdminOverlay({
|
||||
loading: false,
|
||||
});
|
||||
}}
|
||||
className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
|
||||
className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 text-rose-500 hover:bg-rose-500/10 rounded-lg transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
|
||||
aria-label={`Delete category ${cat.name}`}
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
@@ -230,18 +230,18 @@ export default function AdminOverlay({
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="p-6 bg-slate-800/30 rounded-3xl border border-slate-800 space-y-4">
|
||||
<section className="p-6 lg:p-8 xl:p-10 bg-slate-800/30 rounded-3xl border border-slate-800 space-y-4">
|
||||
<div className="flex items-center gap-2 text-rose-500">
|
||||
<AlertTriangle size={16} />
|
||||
<p className="text-sm font-black">Sign Out</p>
|
||||
<p className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black">Sign Out</p>
|
||||
</div>
|
||||
<p className="text-xs text-muted">End your session and return to the login screen.</p>
|
||||
<p className="text-xs lg:text-sm xl:text-base lg:text-lg xl:text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl text-muted">End your session and return to the login screen.</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
import('@/lib/auth').then(m => m.clearAuth());
|
||||
window.location.href = '/login';
|
||||
}}
|
||||
className="w-full bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/20 font-black py-3 rounded-xl transition-all flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
|
||||
className="w-full bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/20 font-black py-3 lg:py-4 xl:py-5 rounded-xl transition-all flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
|
||||
>
|
||||
<LogOut size={16} /> Sign Out
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user