Home screen respect safe areas in all orientations

lib/widgets/compass_indicator.dart

@@ -11,10 +11,12 @@ import '../app_state.dart';
 /// The compass appears in the top-right corner of the map and is disabled (non-interactive) when in follow+rotate mode.
 class CompassIndicator extends StatefulWidget {
   final AnimatedMapController mapController;
+  final EdgeInsets safeArea;
 
   const CompassIndicator({
     super.key,
     required this.mapController,
+    required this.safeArea,
   });
 
   @override
@@ -46,9 +48,11 @@ class _CompassIndicatorState extends State<CompassIndicator> {
         // Check if we're in follow+rotate mode (compass should be disabled)
         final isDisabled = appState.followMeMode == FollowMeMode.rotating;
 
+        final baseTop = (appState.uploadMode == UploadMode.sandbox || appState.uploadMode == UploadMode.simulate) ? 60 : 18;
+        
         return Positioned(
-          top: (appState.uploadMode == UploadMode.sandbox || appState.uploadMode == UploadMode.simulate) ? 60 : 18,
-          right: 16,
+          top: baseTop + widget.safeArea.top,
+          right: 16 + widget.safeArea.right,
           child: GestureDetector(
             onTap: isDisabled ? null : () {
               // Animate to north-up orientation

lib/widgets/map/map_overlays.dart

@@ -51,13 +51,15 @@ class MapOverlays extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final safeArea = MediaQuery.of(context).padding;
+    
     return Stack(
       children: [
         // MODE INDICATOR badge (top-right)
         if (uploadMode == UploadMode.sandbox || uploadMode == UploadMode.simulate)
           Positioned(
-            top: 18,
-            right: 14,
+            top: topPositionWithSafeArea(18, safeArea),
+            right: rightPositionWithSafeArea(14, safeArea),
             child: Container(
               padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
               decoration: BoxDecoration(
@@ -86,12 +88,13 @@ class MapOverlays extends StatelessWidget {
         // Compass indicator (top-right, below mode indicator)
         CompassIndicator(
           mapController: mapController,
+          safeArea: safeArea,
         ),
 
-        // Zoom indicator, positioned relative to button bar
+        // Zoom indicator, positioned relative to button bar with left safe area
         Positioned(
-          left: 10,
-          bottom: bottomPositionFromButtonBar(kZoomIndicatorSpacingAboveButtonBar, MediaQuery.of(context).padding.bottom),
+          left: leftPositionWithSafeArea(10, safeArea),
+          bottom: bottomPositionFromButtonBar(kZoomIndicatorSpacingAboveButtonBar, safeArea.bottom),
           child: Container(
             padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 2),
             decoration: BoxDecoration(
@@ -119,11 +122,11 @@ class MapOverlays extends StatelessWidget {
           ),
         ),
 
-        // Attribution overlay, positioned relative to button bar
+        // Attribution overlay, positioned relative to button bar with left safe area
         if (attribution != null)
           Positioned(
-            bottom: bottomPositionFromButtonBar(kAttributionSpacingAboveButtonBar, MediaQuery.of(context).padding.bottom),
-            left: 10,
+            bottom: bottomPositionFromButtonBar(kAttributionSpacingAboveButtonBar, safeArea.bottom),
+            left: leftPositionWithSafeArea(10, safeArea),
             child: GestureDetector(
               onTap: () => _showAttributionDialog(context, attribution!),
               child: Container(
@@ -146,10 +149,10 @@ class MapOverlays extends StatelessWidget {
             ),
           ),
 
-        // Zoom and layer controls (bottom-right), positioned relative to button bar
+        // Zoom and layer controls (bottom-right), positioned relative to button bar with right safe area
         Positioned(
-          bottom: bottomPositionFromButtonBar(kZoomControlsSpacingAboveButtonBar, MediaQuery.of(context).padding.bottom),
-          right: 16,
+          bottom: bottomPositionFromButtonBar(kZoomControlsSpacingAboveButtonBar, safeArea.bottom),
+          right: rightPositionWithSafeArea(16, safeArea),
           child: Consumer<AppState>(
             builder: (context, appState, child) {
               return Column(

lib/widgets/map_view.dart

@@ -661,17 +661,22 @@ class MapViewState extends State<MapView> {
               selectedTileType: appState.selectedTileType,
             ),
             cameraLayers,
-            // Built-in scale bar from flutter_map, positioned relative to button bar
-            Scalebar(
-              alignment: Alignment.bottomLeft,
-              padding: EdgeInsets.only(
-                left: 8, 
-                bottom: bottomPositionFromButtonBar(kScaleBarSpacingAboveButtonBar, MediaQuery.of(context).padding.bottom)
-              ),
-              textStyle: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
-              lineColor: Colors.black,
-              strokeWidth: 3,
-              // backgroundColor removed in flutter_map >=8 (wrap in Container if needed)
+            // Built-in scale bar from flutter_map, positioned relative to button bar with safe area
+            Builder(
+              builder: (context) {
+                final safeArea = MediaQuery.of(context).padding;
+                return Scalebar(
+                  alignment: Alignment.bottomLeft,
+                  padding: EdgeInsets.only(
+                    left: leftPositionWithSafeArea(8, safeArea), 
+                    bottom: bottomPositionFromButtonBar(kScaleBarSpacingAboveButtonBar, safeArea.bottom)
+                  ),
+                  textStyle: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
+                  lineColor: Colors.black,
+                  strokeWidth: 3,
+                  // backgroundColor removed in flutter_map >=8 (wrap in Container if needed)
+                );
+              },
             ),
           ],
         ),