Fusion
adaedb70ef
Mobile Navigation: - Add MobileNav component with bottom tab bar - Show mobile nav on small screens, hide desktop sidebar - Add session count badge to Sessions tab - Add safe area padding for notched devices Session Management: - Redesign SessionCard for mobile with action menu - Add MobileActionSheet for session actions - Keep primary action prominent Forms & Dialogs: - Stack form fields vertically on mobile - Ensure 44px minimum touch targets - Update dialogs for 320px viewport Responsive Layout: - Add MobilePageHeader with back button - Reduce page padding on mobile - Stack multi-column grids vertically Touch & Interaction: - Add active states to interactive elements - Ensure 8px spacing between touch targets Complex Pages: - Update Repo Workspace for mobile - Update Tool Workshop and Config Profiles Build: 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
|