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
2.5 KiB
2.5 KiB
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