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

16
frontend/components/InventoryTable.tsx
View File

@@ -31,7 +31,7 @@ export default function InventoryTable({
}: InventoryTableProps) {
if (categories.length === 0) {
return (
<div className="py-20 text-center text-secondary">
<div className="py-2 lg:py-3 xl:py-40 text-center text-secondary">
<Package size={48} className="mx-auto mb-4 opacity-10" />
<p className="font-medium">No results found</p>
</div>
@@ -45,7 +45,7 @@ export default function InventoryTable({
return (
<div key={cat} className="bg-surface/50 border border-slate-800/50 rounded-3xl overflow-hidden transition-all duration-300">
<div
className="w-full p-4 md:p-5 flex items-center justify-between hover:bg-surface/60 transition-colors cursor-pointer"
className="w-full p-4 md:p-5 lg:p-6 xl:p-8 flex items-center justify-between hover:bg-surface/60 transition-colors cursor-pointer"
onClick={() => onExpandCategory(expandedCategory === cat ? null : cat)}
>
<div className="flex items-center gap-3">
@@ -53,7 +53,7 @@ export default function InventoryTable({
<Layers size={20} />
</div>
<div className="text-left">
<h3 className="card-title text-base sm:text-lg">{cat}</h3>
<h3 className="card-title text-base sm:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl">{cat}</h3>
<p className="card-subtitle tracking-tight">
{categoryItems.length} Item types in stock
</p>
@@ -67,7 +67,7 @@ export default function InventoryTable({
e.stopPropagation();
onEditCategory(cat);
}}
className="p-2 hover:bg-slate-800 rounded-full text-muted hover:text-primary transition-colors relative z-10"
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 text-muted hover:text-primary transition-colors relative z-10"
>
<EditIcon size={16} />
</button>
@@ -76,13 +76,13 @@ export default function InventoryTable({
</div>
{expandedCategory === cat && (
<div className="p-4 pt-0 space-y-2 animate-in slide-in-from-top-4 duration-300">
<div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 pt-0 space-y-2 animate-in slide-in-from-top-4 duration-300">
<div className="h-px bg-slate-800/50 mb-4 mx-2" />
{categoryItems.map(item => (
<div
key={item.id}
onClick={() => onItemClick(item)}
className="bg-background/40 border border-slate-800/50 p-4 rounded-2xl flex items-center justify-between hover:border-primary/40 cursor-pointer transition-all active:scale-[0.98]"
className="bg-background/40 border border-slate-800/50 p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 rounded-2xl flex items-center justify-between hover:border-primary/40 cursor-pointer transition-all active:scale-[0.98]"
>
<div className="flex items-center gap-3 flex-1 min-w-0 pr-4">
<div className="w-8 h-8 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500 shrink-0">
@@ -95,12 +95,12 @@ export default function InventoryTable({
</div>
<div className="text-right shrink-0">
<span className={cn(
"text-lg font-black",
"text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl font-black",
item.quantity <= item.min_quantity ? "text-amber-500" : "text-primary"
)}>
{item.quantity}
</span>
<p className="text-sm text-muted font-bold tracking-tight">Stock</p>
<p className="text-sm lg:text-base xl:text-lg lg:text-xl xl:text-2xl lg:text-3xl xl:text-4xl text-muted font-bold tracking-tight">Stock</p>
</div>
</div>
))}