Enhance mobile responsiveness and touch target sizes

[SahilKumar75]

Problem

Some UI elements are too small for comfortable mobile interaction, and the app doesn't adapt well to different screen sizes and orientations.

Issues Identified

1. Touch Target Sizes

• Too small: Some buttons and chips are below 44x44pt minimum
• Calendar cells: Month view cells are cramped on small screens
• Participant tiles: Hard to tap in HangoutScreen grid
• Stepper buttons: +/- buttons in AuthScreen date picker
• Close/dismiss icons: Small X buttons in modals

2. Responsive Layout Issues

• Fixed widths: Some cards don't adapt to screen width
• Horizontal overflow: Long text truncates poorly
• No landscape support: Layouts break in landscape orientation
• Tablet optimization: Doesn't use extra space on tablets
• Small screen cramping: Content too dense on smaller phones

3. Spacing and Density

• Inconsistent padding: Some screens feel cramped
• List item spacing: Rows too close together
• Modal padding: Bottom sheets cut off on small screens
• Keyboard overlap: Input fields hidden by keyboard

Proposed Solutions

1. Touch Target Audit

Ensure all interactive elements meet minimum sizes:

• Buttons: 44x44pt minimum
• Icons: 44x44pt tap area (even if icon is smaller)
• List items: 48pt minimum height
• Chips/pills: 36pt minimum height

2. Responsive Breakpoints

Implement responsive design:

const breakpoints = {
  small: 375,  // iPhone SE
  medium: 390, // iPhone 14
  large: 428,  // iPhone 14 Pro Max
  tablet: 768, // iPad
};

3. Dynamic Spacing

Use percentage-based or flex layouts:

• Replace fixed widths with flex: 1
• Use minWidth/maxWidth constraints
• Implement responsive padding based on screen size

4. Keyboard Handling

• Use KeyboardAvoidingView consistently
• Implement ScrollView with keyboardShouldPersistTaps
• Add keyboard dismiss on scroll
• Ensure inputs scroll into view when focused

5. Orientation Support

• Test and fix landscape layouts
• Consider hiding tab bar in landscape
• Adjust grid columns based on orientation
• Use aspect ratios instead of fixed heights

Affected Components

High Priority

• CapsuleTabBar: Tab items too small on small screens
• Calendar grid: Month view cells cramped
• Participant tiles: HangoutScreen meeting grid
• Input fields: Need better keyboard handling
• Modal sheets: Bottom padding issues

Medium Priority

• Note cards: Masonry layout on small screens
• Meal/burn rows: Touch targets in CalorieScreen
• Room cards: HangoutScreen lobby
• Drawer menu: Items spacing

Testing Checklist

• Test on iPhone SE (smallest screen)
• Test on iPhone 14 Pro Max (largest phone)
• Test on iPad (tablet layout)
• Test in landscape orientation
• Test with large text accessibility setting
• Test keyboard interactions on all forms

Priority

High - Mobile usability is critical

Acceptance Criteria

• All touch targets meet 44x44pt minimum
• Layouts adapt to different screen sizes
• No horizontal overflow or cut-off content
• Keyboard doesn't hide input fields
• Landscape orientation works properly
• Tablet layout uses available space efficiently