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:
@@ -324,24 +324,24 @@ export default function Home() {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">TFM aInventory</h1>
|
||||
<p className="text-xs md:text-sm text-secondary font-bold tracking-tight mt-1 leading-relaxed">Check-in, Check-out & Trash Operations</p>
|
||||
<h1 className="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight text-white leading-tight">TFM aInventory</h1>
|
||||
<p className="text-xs md:text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl text-secondary font-bold tracking-tight mt-1 leading-relaxed">Check-in, Check-out & Trash Operations</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between sm:justify-end gap-3 sm:gap-6 bg-surface/50 sm:bg-transparent px-4 py-2 sm:p-0 rounded-2xl border border-slate-800/50 sm:border-none">
|
||||
<div className="flex flex-wrap items-center justify-between sm:justify-end gap-3 sm:gap-6 bg-surface/50 sm:bg-transparent px-4 lg:px-5 xl:px-6 py-2 sm:p-0 rounded-2xl border border-slate-800/50 sm:border-none">
|
||||
<div className="flex flex-wrap items-center gap-4 sm:gap-6">
|
||||
{isScannerReady && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
|
||||
<span className="text-xs font-black text-green-500/90 whitespace-nowrap">
|
||||
<span 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-black text-green-500/90 whitespace-nowrap">
|
||||
Scanner: OK
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2" data-testid={!isOnline ? "offline-indicator" : undefined}>
|
||||
<div className={`w-1.5 h-1.5 rounded-full ${isOnline ? 'bg-green-500 animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.6)]'}`} />
|
||||
<span className={`text-xs font-black whitespace-nowrap ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`} data-testid={!isOnline ? "offline-sync-indicator" : undefined}>
|
||||
<span 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-black whitespace-nowrap ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`} data-testid={!isOnline ? "offline-sync-indicator" : undefined}>
|
||||
Sync: {isOnline ? 'Active' : 'Offline'}
|
||||
</span>
|
||||
</div>
|
||||
@@ -351,7 +351,7 @@ export default function Home() {
|
||||
onClick={handleSync}
|
||||
disabled={syncing}
|
||||
data-testid="manual-sync-button"
|
||||
className="p-2.5 bg-surface border border-slate-800 text-secondary rounded-xl hover:text-white transition-all active:scale-95 disabled:opacity-50"
|
||||
className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10.5 bg-surface border border-slate-800 text-secondary rounded-xl hover:text-white transition-all active:scale-95 disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw size={18} className={syncing ? "animate-spin text-primary" : ""} />
|
||||
</button>
|
||||
@@ -424,17 +424,17 @@ export default function Home() {
|
||||
|
||||
{/* Box Contents Selection Modal */}
|
||||
{boxMatches.length > 0 && !selectedItem && (
|
||||
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-background/80 animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-lg bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 overflow-hidden animate-in slide-in-from-bottom-10 duration-300 flex flex-col max-h-[85vh]">
|
||||
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-background/80 animate-in fade-in duration-200">
|
||||
<div className="w-full max-w-lg bg-surface border border-slate-800 rounded-[2.5rem] shadow-2xl p-6 lg:p-8 xl:p-10 overflow-hidden animate-in slide-in-from-bottom-10 duration-300 flex flex-col max-h-[85vh]">
|
||||
<div className="flex justify-between items-center mb-6 shrink-0">
|
||||
<div>
|
||||
<h3 className="text-xl font-black tracking-tight flex items-center gap-2">
|
||||
<h3 className="text-xl lg:text-2xl xl:text-3xl lg:text-4xl xl:text-5xl font-black tracking-tight flex items-center gap-2">
|
||||
<Package className="text-primary" />
|
||||
Box Contents
|
||||
</h3>
|
||||
<p className="text-xs text-secondary font-bold mt-1">Select the item you want to {mode.replace('_', ' ').toLowerCase()}</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-secondary font-bold mt-1">Select the item you want to {mode.replace('_', ' ').toLowerCase()}</p>
|
||||
</div>
|
||||
<button onClick={() => setBoxMatches([])} className="p-2 hover:bg-slate-800 rounded-full">
|
||||
<button onClick={() => setBoxMatches([])} 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">
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
@@ -447,11 +447,11 @@ export default function Home() {
|
||||
setBoxMatches([]);
|
||||
setAdjustType(mode === 'CHECK_IN' ? 'ADD' : 'REMOVE');
|
||||
}}
|
||||
className="w-full text-left bg-background/50 hover:bg-slate-800 border border-slate-800/80 p-4 rounded-2xl flex items-center gap-4 transition-all active:scale-[0.98] group"
|
||||
className="w-full text-left bg-background/50 hover:bg-slate-800 border border-slate-800/80 p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 rounded-2xl flex items-center gap-4 transition-all active:scale-[0.98] group"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-black text-white">{item.name}</p>
|
||||
<p className="text-xs text-secondary font-bold mt-1">Part #: {item.part_number || 'N/A'}</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 text-white">{item.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-secondary font-bold mt-1">Part #: {item.part_number || 'N/A'}</p>
|
||||
</div>
|
||||
<ChevronRight size={18} className="text-secondary group-hover:text-primary" />
|
||||
</button>
|
||||
@@ -464,9 +464,9 @@ export default function Home() {
|
||||
|
||||
{/* Footer Branding */}
|
||||
<footer className="mt-20 mb-8 flex flex-col items-center gap-2 opacity-70">
|
||||
<p className="text-sm font-bold text-secondary">Powered by TFM Group Software</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-secondary">Powered by TFM Group Software</p>
|
||||
<div className="h-px w-16 bg-slate-700/60" />
|
||||
<p className="text-xs font-mono text-secondary">v{versionData.version} • {versionData.last_build} • BUILD: dev-{(versionData as any).commit || 'N/A'}</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-mono text-secondary">v{versionData.version} • {versionData.last_build} • BUILD: dev-{(versionData as any).commit || 'N/A'}</p>
|
||||
</footer>
|
||||
</div>
|
||||
</PageShell>
|
||||
|
||||
Reference in New Issue
Block a user