[UI/UX Design] Design responsive Dashboard layout for portrait tablets

[thlpkee20-wq]

Description

The Dashboard breaks awkwardly at 768-900 px portrait. Define a two-column tablet grid and card reflow rules.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/pages/Dashboard.tsx
• Include annotated Figma-style spec in docs

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/dashboard-tablet-portrait
• Implement changes
  • Define 2-col tablet grid rules
  • Reflow chart card to full width
  • Adjust padding tokens
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • Breakpoints, states, keyboard/screen-reader, contrast
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: Dashboard layout for portrait tablets

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours