feat: implement mobile app usability improvements

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

openspec/changes/mobile-app-usability/specs/mobile-responsive-layouts/spec.md

@@ -0,0 +1,67 @@
+## 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