mirror of
https://github.com/jhbruhn/respira.git
synced 2026-01-27 10:23:41 +00:00
Implemented comprehensive responsive design improvements for tablet support and simplified typography from 12 different font sizes to a clean 5-level hierarchy using only standard Tailwind classes. Responsive improvements: - Canvas height now adapts: 400px (mobile) → 500px (tablet) → 600px (desktop) - Header stacks vertically on tablets, side-by-side on desktop (1024px+) - WorkflowStepper scales appropriately for smaller screens - Canvas overlays are more compact on mobile/tablet - All components use responsive spacing and padding Typography system redesign: - Reduced from 12 sizes to 5 levels (Display, Heading, Subheading, Body, Label) - Removed arbitrary pixel values (text-[7px], text-[9px], text-[10px], etc.) - All text now uses standard Tailwind classes (text-xs, text-sm, text-base, text-lg, text-xl) - Minimum text size is now 12px (text-xs) for better accessibility - Buttons upgraded to text-sm (14px) for improved touch targets - Consistent responsive scaling for top-level headers only Added docs/TYPOGRAPHY_SYSTEM.md with usage guidelines and component mapping. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| QUICK_UI_IMPROVEMENTS.md | ||
| TYPOGRAPHY_SYSTEM.md | ||
| UI_BEFORE_AFTER_EXAMPLES.md | ||
| UI_DESIGN_ANALYSIS.md | ||
| UI_IMPROVEMENTS.md | ||
| UI_IMPROVEMENTS_IMPLEMENTED.md | ||
| UI_IMPROVEMENTS_SUMMARY.md | ||