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