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
24 lines
1.4 KiB
Markdown
24 lines
1.4 KiB
Markdown
## 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
|