Alex Blank
ab79080f0b
Frontend: - Create reusable DataStates components (LoadingState, ErrorState, EmptyState) - Refactor 12 pages to use shared state components instead of inline JSX - Extract useInstanceActions hook to eliminate session action duplication - Update dashboard and sessions pages to use shared hook OpenSpec: - Archive completed mobile-app-usability change (44/44 tasks) - Archive completed add-config-profiles change (15/15 tasks) Quality: TypeScript check passes, production build succeeds
68 lines
2.5 KiB
Markdown
68 lines
2.5 KiB
Markdown
## ADDED Requirements
|
|
|
|
### Requirement: Mobile Breakpoint System
|
|
The system SHALL apply mobile-specific styles at viewports below 768px width.
|
|
|
|
#### Scenario: Form stacking on mobile
|
|
- **GIVEN** a multi-column form layout
|
|
- **WHEN** the viewport width is less than 768px
|
|
- **THEN** all form fields stack vertically in a single column
|
|
- **AND** grid layouts use `grid-template-columns: 1fr`
|
|
|
|
#### Scenario: Dialog sizing on mobile
|
|
- **GIVEN** a dialog or modal
|
|
- **WHEN** the viewport width is less than 768px
|
|
- **THEN** the dialog fits within the viewport width (maximum 100vw - 32px padding)
|
|
- **AND** the dialog content is scrollable if it exceeds the viewport height
|
|
|
|
#### Scenario: Page padding on mobile
|
|
- **GIVEN** any page content
|
|
- **WHEN** the viewport width is less than 768px
|
|
- **THEN** horizontal padding is reduced to 16px or less
|
|
- **AND** content does not horizontally scroll
|
|
|
|
### Requirement: Touch Target Minimum Size
|
|
The system SHALL ensure all interactive elements meet minimum touch target sizes.
|
|
|
|
#### Scenario: Button touch targets
|
|
- **GIVEN** any button or clickable element
|
|
- **THEN** it has a minimum height of 44px
|
|
- **AND** it has a minimum width of 44px where applicable
|
|
|
|
#### Scenario: Link touch targets
|
|
- **GIVEN** any text link in a list or navigation
|
|
- **THEN** the clickable area has a minimum height of 44px
|
|
- **AND** adjacent links have minimum 8px spacing
|
|
|
|
### Requirement: Mobile Page Headers
|
|
The system SHALL provide consistent page headers on mobile with back navigation.
|
|
|
|
#### Scenario: Page header on mobile
|
|
- **GIVEN** any page other than the dashboard
|
|
- **WHEN** viewed on mobile
|
|
- **THEN** the page displays a header with:
|
|
- A back button (where applicable)
|
|
- The page title
|
|
- Contextual action buttons (if any)
|
|
|
|
#### Scenario: Back button navigation
|
|
- **GIVEN** a page with a back button on mobile
|
|
- **WHEN** the user taps the back button
|
|
- **THEN** the app navigates to the previous page
|
|
- **AND** if no previous page exists, it navigates to the dashboard
|
|
|
|
### Requirement: Active States for Touch
|
|
The system SHALL provide visual feedback when touchable elements are tapped.
|
|
|
|
#### Scenario: Button active state
|
|
- **GIVEN** a button on a touch device
|
|
- **WHEN** the user taps the button
|
|
- **THEN** a visual active state is displayed (e.g., background color change)
|
|
- **AND** the active state persists for the duration of the tap
|
|
|
|
#### Scenario: Card active state
|
|
- **GIVEN** a clickable card on a touch device
|
|
- **WHEN** the user taps the card
|
|
- **THEN** a visual active state is displayed
|
|
- **AND** the active state is distinct from the hover state
|