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

28
frontend/components/ItemComparisonModal.tsx
View File

@@ -42,22 +42,22 @@ export default function ItemComparisonModal({
const hasChanges = fields.some(f => isDifferent(f.key));
return (
<div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-background/80">
<div className="fixed inset-0 z-[200] flex items-center justify-center p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-background/80">
<div className="bg-surface border border-slate-800 rounded-[2.5rem] p-8 w-full max-w-2xl shadow-2xl max-h-[90vh] overflow-y-auto">
<div className="flex items-center gap-3 mb-6">
<AlertTriangle size={24} className="text-amber-500" />
<div>
<h3 className="text-xl font-black text-white">Part Number Already Exists</h3>
<p className="text-xs text-secondary mt-1">Compare the versions below</p>
<h3 className="text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-black text-white">Part Number Already Exists</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-secondary mt-1">Compare the versions below</p>
</div>
</div>
{/* Comparison Table */}
<div className="space-y-3 mb-8">
<div className="grid grid-cols-3 gap-4 mb-4 pb-4 border-b border-slate-800">
<div className="text-xs font-bold text-muted">Field</div>
<div className="text-xs font-bold text-secondary">Current (ID: {existingItem?.id})</div>
<div className="text-xs font-bold text-primary">New (Import)</div>
<div 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">Field</div>
<div 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-secondary">Current (ID: {existingItem?.id})</div>
<div 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-primary">New (Import)</div>
</div>
{fields.map(field => {
@@ -68,15 +68,15 @@ export default function ItemComparisonModal({
return (
<div
key={field.key}
className={`grid grid-cols-3 gap-4 p-3 rounded-lg ${
className={`grid grid-cols-3 gap-4 p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8 rounded-lg ${
different ? 'bg-amber-500/10 border border-amber-500/20' : 'bg-slate-800/30'
}`}
>
<div className="text-sm font-bold text-secondary">{field.label}</div>
<div className={`text-sm font-mono ${different ? 'text-amber-200' : 'text-secondary'}`}>
<div className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-bold text-secondary">{field.label}</div>
<div className={`text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-mono ${different ? 'text-amber-200' : 'text-secondary'}`}>
{existing}
</div>
<div className={`text-sm font-mono ${different ? 'text-primary font-bold' : 'text-secondary'}`}>
<div className={`text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-mono ${different ? 'text-primary font-bold' : 'text-secondary'}`}>
{newVal}
</div>
</div>
@@ -85,8 +85,8 @@ export default function ItemComparisonModal({
</div>
{!hasChanges && (
<div className="p-4 bg-slate-800/50 rounded-xl mb-6 border border-slate-700">
<p className="text-sm text-secondary">✓ Items are identical. No update needed.</p>
<div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-slate-800/50 rounded-xl mb-6 border border-slate-700">
<p className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl text-secondary">✓ Items are identical. No update needed.</p>
</div>
)}
@@ -96,7 +96,7 @@ export default function ItemComparisonModal({
onClick={onSkip}
disabled={loading}
aria-label="Skip this item comparison"
className="flex-1 flex items-center justify-center gap-2 py-4 bg-slate-800 hover:bg-slate-700 text-secondary rounded-2xl text-sm font-black cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-slate-700 focus:ring-2 focus:ring-blue-500 focus:outline-none"
className="flex-1 flex items-center justify-center gap-2 py-4 bg-slate-800 hover:bg-slate-700 text-secondary rounded-2xl text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed border border-slate-700 focus:ring-2 focus:ring-blue-500 focus:outline-none"
>
<SkipForward size={16} /> Skip
</button>
@@ -105,7 +105,7 @@ export default function ItemComparisonModal({
onClick={onUpdate}
disabled={loading}
aria-label="Update item with new data"
className="flex-1 flex items-center justify-center gap-2 py-4 bg-primary hover:bg-blue-600 text-white rounded-2xl text-sm font-black cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed shadow-xl shadow-primary/20 focus:ring-2 focus:ring-blue-400 focus:outline-none"
className="flex-1 flex items-center justify-center gap-2 py-4 bg-primary hover:bg-blue-600 text-white rounded-2xl text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed shadow-xl shadow-primary/20 focus:ring-2 focus:ring-blue-400 focus:outline-none"
>
{loading ? (
<>