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:
2026-04-19 18:03:21 +03:00
parent e0321c29a0
commit 73dde9b40d
30 changed files with 689 additions and 459 deletions

View File

@@ -68,7 +68,9 @@
"Bash(sed -i -e 's/\\\\btext-slate-100\\\\b/text-secondary/g' -e s/placeholder:text-slate-700/placeholder:text-muted/g -e s/hover:text-slate-300/hover:text-secondary/g app/page.tsx)",
"Bash(sed -i 's/\\\\btext-slate-300\\\\b/text-secondary/g' app/page.tsx)",
"Bash(npx tsc *)",
"Bash(python -m pytest backend/tests/ -q)"
"Bash(python -m pytest backend/tests/ -q)",
"Bash(chmod +x /tmp/update_fonts.sh)",
"Bash(/tmp/update_fonts.sh)"
]
}
}