Feature: Make app UI & menus responsive across phones, tablets and orientations — ensure full functionality

[arn-c0de]

Improve the app's UI so it works reliably and looks good across multiple device form factors (phones, large phones, tablets, foldables) and in both portrait and landscape orientations. Ensure all menus, dialogs, pickers, map overlays, and core functionality are fully supported and tested on common device sizes and aspect ratios.

Why

• Current UI has been primarily tested on tablets in portrait orientation and may not behave or scale correctly on phones and landscape orientations.
• Key UX elements (menus, MilitarySymbolPicker, map overlays, pattern labels, dialogs) must remain accessible, readable, and fully functional across devices and orientations for realistic field use.
• Supporting responsive layouts improves accessibility, reduces UI bugs, and broadens device compatibility for users.

Proposed work

1. Adopt responsive layout strategies (WindowSizeClass, Compose adaptive patterns, ConstraintLayout/Grid variants) and define breakpoints for small/medium/large/extra-large screens.
2. Refactor core screens to be responsive: map screen, symbol picker, tactical units list, settings, dialogs, and pattern overlay labels.
3. Make menus and navigation adaptive: bottom navigation for phones, side navigation for tablets/large screens; responsive drawers and action bars for landscape mode.
4. Ensure controls scale (touch targets >= 48dp), fonts respond to user settings, and icons scale properly for high-DPI screens.
5. Preserve app state across orientation changes and multi-window modes (activity/fragment/compose state handling). Use ViewModel and saved state as needed.
6. Add automated UI tests and screenshot tests for multiple device sizes and orientations; add manual QA checklist and device matrix.
7. Update documentation and README with supported device list and testing instructions.

Acceptance criteria ✅

• Menus and navigation provide usable access patterns per device class (e.g., bottom nav on phone, rail on tablet) and maintain feature parity.
• Dialogs and pickers (including MilitarySymbolPicker) display and function correctly on small screens and in landscape without clipping or overlap.
• Map overlays (unit markers, arrows, labels, pattern lines) reposition and scale to remain readable and not overlap critical UI controls at multiple zooms and sizes.
• Orientation changes preserve critical state (selected unit, open dialogs, map center/zoom, selected symbol) and do not cause visual glitches.
• App layouts adapt correctly across defined breakpoints (phone small/medium/large, tablet) and both portrait/landscape.
• README/docs updated with supported devices and testing matrix.

Tasks

• Define breakpoints and device classes and add a responsive utility module (WindowSizeClass helpers).
• Inventory screens/components to refactor (map, lists, symbol picker, settings, dialogs) and create responsive variants.
• Implement adaptive navigation (bottom navigation vs side rail) and responsive menus.
• Update MilitarySymbolPicker.kt grid to adapt number of columns and tile sizes by screen width; ensure dialog sizes adapt.
• Update map overlays (TacticalUnitsMapOverlay, PatternLabelOverlay) to compute sizes & offsets based on screen density and available space.
• Add orientation/state handling for dialogs, map state, and selection persistence (ViewModel + savedStateHandle).
• Manual QA checklist: list of devices/resolutions/orientations to verify and specific scenarios (zoom, heavy overlays, dialogs open while map interactable).
• Update docs and add device compatibility matrix in README.

Testing & QA 👀

• Minimum device set for automated and manual tests:
  • Small phone: 360x640 dp (portrait & landscape)
  • Typical phone: 412x732 dp
  • Large phone / phablet: 480x800 dp
  • Small tablet: 600x1024 dp
  • Large tablet: 800x1280 dp
  • Foldable / multi-window (if available)
• Verify: navigation, menu accessibility, dialog sizing, map overlays (no clipping), symbol picker usability, orientation changes and state retention.
• Add screenshot baselines for each configuration to catch regressions.

Accessibility & Localization

• Ensure text scales with system font size and that all touch targets meet minimum sizes.
• Verify RTL layouts and localized strings do not break layouts.