Fixed Issue #6966 [Status bar overlap on iPads using Tailwind CSS]

web/src/features/map-controls/ZoomControls.tsx

@@ -1,15 +1,12 @@
-import { useFeatureFlag } from 'features/feature-flags/api';
 import { ReactElement } from 'react';
 import { NavigationControl } from 'react-map-gl/maplibre';
 
 export default function ZoomControls(): ReactElement {
-  const isConsumptionOnlyMode = useFeatureFlag('consumption-only');
-  const marginTop = isConsumptionOnlyMode ? 54 : 98;
   return (
     <NavigationControl
       style={{
         marginRight: 12,
-        marginTop: marginTop,
+        marginTop: 'calc(98px + var(--sat, 0px))',
         width: '33px',
         boxShadow: '0px 1px 1px  rgb(0 0 0 / 0.1)',
         border: 0,

web/src/features/map/Map.tsx

@@ -375,7 +375,13 @@ export default function MapPage({ onMapLoad }: MapPageProps): ReactElement {
         [Number.NEGATIVE_INFINITY, SOUTHERN_LATITUDE_BOUND],
         [Number.POSITIVE_INFINITY, NORTHERN_LATITUDE_BOUND],
       ]}
-      style={{ minWidth: '100vw', height: '100vh', position: 'absolute' }}
+      style={{
+        minWidth: '100vw',
+        height: '100vh',
+        position: 'absolute',
+        inset: 0,
+        marginTop: 'calc(var(--sat) * -1)',
+      }}
       mapStyle={MAP_STYLE as StyleSpecification}
     >
       <BackgroundLayer />

web/src/index.css

@@ -25,6 +25,11 @@
     /* Disables mobile touch specific blue user select effect */
     -webkit-tap-highlight-color: transparent;
   }
+
+  #root {
+    @apply pt-[var(--sat)];
+  }
+
   h1 {
     @apply text-xl;
     @apply font-poppins;
@@ -50,6 +55,22 @@
     @apply font-inter;
   }
 }
+
+@layer utilities {
+  .extend-to-top-edge {
+    @apply absolute left-0 right-0 top-0 h-full;
+    margin-top: calc(var(--sat) * -1);
+  }
+
+  .content-within-safe-area {
+    @apply relative z-[1] p-[var(--sar)_var(--sab)_var(--sal)];
+  }
+
+  .pad-for-header {
+    @apply pt-[var(--sat)];
+  }
+}
+
 *::-webkit-scrollbar {
   /*remove scrollbar track chrome*/
   background-color: transparent;