# responsive-layout Specification

## Purpose
TBD - created by archiving change admin-responsive-adaptation. Update Purpose after archive.
## Requirements
### Requirement: Three-breakpoint responsive system
The admin frontend SHALL adapt its layout to three device tiers: mobile (< 768px), tablet (768-1024px), and desktop (> 1024px). All pages and components MUST render without text overflow, forced line wrapping, or content clipping at any breakpoint.

#### Scenario: Mobile layout (< 768px)
- **WHEN** viewport width is less than 768px
- **THEN** sidebar is replaced by a Drawer triggered via hamburger button
- **AND** content area padding reduces to 12px
- **AND** tables scroll horizontally with touch gesture
- **AND** dashboard stat cards display in 2-column grid

#### Scenario: Tablet layout (768-1024px)
- **WHEN** viewport width is between 768px and 1024px
- **THEN** sidebar defaults to collapsed state
- **AND** content area padding is 16px
- **AND** dashboard stat cards display in 2-column grid
- **AND** chart cards display side-by-side

#### Scenario: Desktop layout (> 1024px)
- **WHEN** viewport width is greater than 1024px
- **THEN** sidebar is fully visible and collapsible
- **AND** content area padding is 24px
- **AND** dashboard stat cards display in 4-column grid
- **AND** chart cards display side-by-side

### Requirement: Table horizontal scroll on narrow screens
All `<Table>` components SHALL support horizontal scrolling when content exceeds viewport width. The scroll behavior MUST be enabled via scroll={{ x }} prop, and all table columns MUST remain visible (no responsive column hiding).

#### Scenario: Wide table on mobile
- **WHEN** a table has more columns than fit within the viewport width
- **THEN** the table container renders a horizontal scrollbar
- **AND** users can scroll horizontally to view all columns
- **AND** action column (if present) remains accessible without scrolling via fixed position

### Requirement: Login page responsiveness
The login page card SHALL not overflow the viewport on any screen size. On mobile devices, the card MUST fit within the screen with comfortable margins.

#### Scenario: Login on small mobile screen (320px)
- **WHEN** viewport width is 320px
- **THEN** login card width does not exceed `calc(100vw - 32px)`
- **AND** the login form remains fully visible and usable

### Requirement: Dashboard responsive grid
Dashboard stat cards and chart cards SHALL use antd responsive Col breakpoints (xs/sm/md) instead of fixed span values. Charts SHALL re-render to fit container width on window resize.

#### Scenario: Dashboard on tablet
- **WHEN** viewing dashboard on a 800px wide tablet
- **THEN** stat cards render 2 per row
- **AND** pie chart and bar chart render side by side
- **AND** gantt chart fits within the content area width

### Requirement: Modal responsiveness
All Modal dialogs SHALL have a max-width constraint preventing overflow beyond the viewport on small screens.

#### Scenario: Modal on mobile
- **WHEN** a modal is opened on a viewport < 768px wide
- **THEN** the modal width does not exceed `calc(100vw - 24px)`
- **AND** the modal body has a max-height of 60vh with vertical scroll
- **AND** modal mask covers the full viewport

### Requirement: Page toolbar responsive wrapping
All page-level toolbars with search/filter/action controls SHALL wrap gracefully on narrow screens using flexWrap and gap spacing, preventing button group clipping or overlap.

#### Scenario: Toolbar with search and action buttons on tablet
- **WHEN** a page toolbar contains a search input group and action button group
- **AND** viewport width is 800px
- **THEN** toolbar items wrap to multiple lines without overflow
- **AND** all buttons remain clickable with adequate spacing

### Requirement: Student fields separation
The Students page SHALL display "学号" (student ID) and "身份证" (ID card number) as two separate table columns instead of a single combined column. Both columns SHALL support ellipsis truncation for long values.

#### Scenario: Student table column display
- **WHEN** viewing the student list
- **THEN** the table includes a "学号" column and a "身份证" column as separate headers
- **AND** long ID numbers are truncated with ellipsis and tooltip on hover

### Requirement: Classroom schedule table scrolling
The classroom schedule grid table SHALL support horizontal scrolling with a sticky first column (classroom name) to aid navigation when viewing beyond the visible date range.

#### Scenario: Schedule table on month with 31 days
- **WHEN** viewing a month schedule on a tablet (800px)
- **THEN** the classroom name column remains fixed on the left
- **AND** date columns scroll horizontally
- **AND** no text overflows or wraps within date cells