fix switch Landscape -> Portrait

.claude/agent-memory/hrms-checkin-expert/issue_position_orientation_change.md

@@ -0,0 +1,48 @@
+---
+name: position_orientation_change_fix
+description: Fix for position map not displaying on screen orientation changes
+type: project
+---
+
+## Issue: Position/Geolocation Not Displaying on Screen Orientation Changes
+
+**Problem:**
+The ArcGIS map component (`AscGISMap.vue`) failed to display or update position when the screen orientation changed between portrait and landscape modes.
+
+**Root Cause:**
+1. The component uses `v-if="$q.screen.gt.xs"` for conditional rendering of different layouts
+2. When orientation changes, the ArcGIS MapView doesn't automatically resize to fit the new container dimensions
+3. ArcGIS MapView requires manual `resize()` call when its container's size changes
+
+**Solution Implemented:**
+Added screen resize handling to `src/components/AscGISMap.vue`:
+
+1. **Added state tracking:**
+   - `isMapInitialized` ref to track when map is ready
+   - `isInitializing` ref to prevent concurrent initializations
+
+2. **Added `handleMapResize()` function:**
+   - Checks if mapView exists and isn't destroyed
+   - Uses `nextTick()` to ensure DOM updates complete before resizing
+   - Calls `mapView.value.resize()` to update map dimensions
+
+3. **Added watcher on `$q.screen.gt.xs`:**
+   - Triggers when screen size crosses the xs breakpoint
+   - Waits for DOM update via `nextTick()`
+   - Calls `handleMapResize()` to adjust map
+
+4. **Added window resize event listener:**
+   - Falls back for orientation changes that might not trigger Quasar's screen watcher
+   - Debounced with 300ms timeout to avoid excessive calls
+   - Properly cleaned up on component unmount
+
+**Files Modified:**
+- `src/components/AscGISMap.vue` - Added resize handling logic
+
+**Best Practices Applied:**
+- Proper cleanup of event listeners in `onBeforeUnmount`
+- Debouncing resize events for performance
+- Using `nextTick()` to ensure DOM synchronization
+- Checking for destroyed state before calling map methods
+
+**Note:** The Google Maps component (`MapCheckin.vue`) was not affected as `vue3-google-map` handles resize automatically.