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

24
frontend/components/LogsOverlay.tsx
View File

@@ -14,15 +14,15 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
if (!show) return null;
return (
<div className="fixed inset-0 z-50 flex flex-col bg-background p-6 animate-in slide-in-from-bottom-20 duration-500">
<div className="fixed inset-0 z-50 flex flex-col bg-background p-6 lg:p-8 xl:p-10 animate-in slide-in-from-bottom-20 duration-500">
<div className="flex justify-between items-center mb-8">
<div>
<h2 className="text-2xl font-black tracking-tight">Audit History</h2>
<p className="text-xs text-muted">Live transaction log from cloud</p>
<h2 className="text-2xl lg:text-3xl xl:text-4xl font-black tracking-tight">Audit History</h2>
<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">Live transaction log from cloud</p>
</div>
<button
onClick={onClose}
className="p-3 bg-surface rounded-full text-secondary"
className="p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8 bg-surface rounded-full text-secondary"
>
<X size={24} />
</button>
@@ -36,29 +36,29 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
</div>
) : (
logs.map((log) => (
<div key={log.id} className="bg-surface/70 border border-slate-800 p-4 rounded-2xl flex items-center justify-between gap-4">
<div key={log.id} className="bg-surface/70 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 gap-4">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<p className={`text-xs font-black ${
<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-black ${
log.action.includes('CHECK_IN') ? "text-green-500" : (log.action.includes('TRASH') ? "text-rose-500" : "text-amber-500")
}`}>
{log.action}
</p>
<span className="text-xs font-bold text-muted">by</span>
<span className="text-xs font-black text-secondary">{log.username || 'System'}</span>
<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-bold text-muted">by</span>
<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-secondary">{log.username || 'System'}</span>
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-bold text-secondary">
<span 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">
{inventory.find(i => i.id === log.target_item_id)?.name || `Item #${log.target_item_id}`}
</span>
</div>
{(log.details || log.timestamp) && (
<div className="flex items-center gap-3 mt-2">
<p className="text-xs text-secondary font-mono">
<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-mono">
{new Date(log.timestamp).toLocaleString()}
</p>
{log.details && (
<span className="text-xs bg-slate-800 text-muted px-2 py-0.5 rounded border border-slate-700 font-mono">
<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 bg-slate-800 text-muted px-2 py-0.5 rounded border border-slate-700 font-mono">
{log.details}
</span>
)}
@@ -66,7 +66,7 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
)}
</div>
<div className="text-right">
<p className={`text-lg font-black ${
<p className={`text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black ${
log.quantity_change > 0 ? "text-green-400" : "text-rose-400"
}`}>
{log.quantity_change > 0 ? '+' : ''}{log.quantity_change}