bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add responsive typography scaling for desktop readability

Browse Source 
- 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:
Daniel Bedeleanu
2026-04-19 18:03:21 +03:00
parent e0321c29a0
commit 73dde9b40d
30 changed files with 689 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/components/CreateUserModal.tsx
View File

@@ -73,8 +73,8 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
<div data-testid="create-user-modal" className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
<div className="bg-surface border border-slate-800 rounded-lg shadow-xl max-w-sm w-full mx-4">
{/* Header */}
<div className="flex items-center justify-between p-6 border-b border-slate-800">
<h2 className="text-lg font-black text-white">Create User</h2>
<div className="flex items-center justify-between p-6 lg:p-8 xl:p-10 border-b border-slate-800">
<h2 className="text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black text-white">Create User</h2>
<button
onClick={onClose}
className="p-1 text-muted hover:text-secondary rounded focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
@@ -85,10 +85,10 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
</div>
{/* Form */}
<form onSubmit={handleSubmit} className="p-6 space-y-4">
<form onSubmit={handleSubmit} className="p-6 lg:p-8 xl:p-10 space-y-4">
{/* Username Field */}
<div>
<label htmlFor="username" className="block text-sm font-semibold text-secondary mb-2">
<label htmlFor="username" className="block text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-semibold text-secondary mb-2">
Username
</label>
<input
@@ -101,19 +101,19 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
if (errors.username) setErrors({ ...errors, username: undefined });
}}
placeholder="Enter username"
className={`w-full px-3 py-2.5 bg-slate-800 border rounded text-white placeholder:text-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
className={`w-full px-3 lg:px-4 xl:px-5 py-2 lg:py-3 xl:py-4.5 bg-slate-800 border rounded text-white placeholder:text-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
errors.username ? 'border-red-500' : 'border-slate-700'
}`}
disabled={loading}
/>
{errors.username && (
<p className="mt-1.5 text-sm text-red-500">{errors.username}</p>
<p className="mt-1.5 text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl text-red-500">{errors.username}</p>
)}
</div>
{/* Password Field */}
<div>
<label htmlFor="password" className="block text-sm font-semibold text-secondary mb-2">
<label htmlFor="password" className="block text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-semibold text-secondary mb-2">
Password
</label>
<input
@@ -126,13 +126,13 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
if (errors.password) setErrors({ ...errors, password: undefined });
}}
placeholder="Enter password"
className={`w-full px-3 py-2.5 bg-slate-800 border rounded text-white placeholder:text-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
className={`w-full px-3 lg:px-4 xl:px-5 py-2 lg:py-3 xl:py-4.5 bg-slate-800 border rounded text-white placeholder:text-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
errors.password ? 'border-red-500' : 'border-slate-700'
}`}
disabled={loading}
/>
{errors.password && (
<p className="mt-1.5 text-sm text-red-500">{errors.password}</p>
<p className="mt-1.5 text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl text-red-500">{errors.password}</p>
)}
</div>
@@ -142,7 +142,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
type="button"
onClick={onClose}
disabled={loading}
className="flex-1 px-4 py-2.5 text-secondary bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
className="flex-1 px-4 lg:px-5 xl:px-6 py-2 lg:py-3 xl:py-4.5 text-secondary bg-slate-800 border border-slate-700 rounded font-semibold hover:bg-slate-700 transition-colors disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
>
Cancel
</button>
@@ -150,7 +150,7 @@ export default function CreateUserModal({ show, onClose, onUserCreated }: Create
type="submit"
data-testid="create-user-submit"
disabled={!isFormValid || loading}
className="flex-1 px-4 py-2.5 bg-primary text-primary-foreground rounded font-semibold hover:bg-blue-600 transition-colors disabled:opacity-50 flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-primary focus-visible:outline-none"
className="flex-1 px-4 lg:px-5 xl:px-6 py-2 lg:py-3 xl:py-4.5 bg-primary text-primary-foreground rounded font-semibold hover:bg-blue-600 transition-colors disabled:opacity-50 flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:ring-primary focus-visible:outline-none"
>
{loading ? (
<>