Bill Ballou
f8bab9ee33
- Add responsive 2-panel layout (mobile single-col, tablet/desktop grid) - Unify specialization ranking with credit bars, status badges, and expandable allocation breakdowns (remove standalone ResultsDashboard) - Inline decision tree ceiling data on course buttons with spec counts - Add Clear All button to reset all course selections - Add collapsible CreditLegend explaining bars, badges, and limits - Extract ModeComparison and MutualExclusionWarnings to Notifications - Add useMediaQuery hook with matchMedia-based breakpoint detection
1.4 KiB
1.4 KiB
ADDED Requirements
Requirement: Mobile-first responsive layout
The app SHALL adapt its layout to three viewport breakpoints: mobile (<640px), tablet (640–1024px), and desktop (>1024px). On mobile, all panels SHALL stack vertically in a single column. On tablet and desktop, the layout SHALL use two columns: specialization panel on the left and course panel on the right.
Scenario: Mobile viewport
- WHEN the viewport width is less than 640px
- THEN the layout SHALL display as a single column with the specialization panel above the course panel, both full-width
Scenario: Tablet viewport
- WHEN the viewport width is between 640px and 1024px
- THEN the layout SHALL display two columns: specialization panel (300px) on the left, course panel (remaining width) on the right
Scenario: Desktop viewport
- WHEN the viewport width is greater than 1024px
- THEN the layout SHALL display two columns with the same structure as tablet, with additional padding
Requirement: Notification banners span full width
Mode comparison and mutual exclusion warnings SHALL render as full-width banners above the main panel layout, not inside a specific column.
Scenario: Warning banner placement
- WHEN a mutual exclusion warning or mode comparison banner is active
- THEN the banner SHALL appear between the header/mode toggle and the main content panels, spanning the full container width