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

[Xeno-Tek]

Fix: Status Bar Overlap on iPads

Overview

This pull request resolves an issue where content overlaps with the status bar on iPad devices. The fix utilizes Tailwind CSS classes to account for the status bar height and safe area insets on iPads without affecting other devices.

Related Issue

Closes #6966

Changes

tailwind.config.cjs

• Added iPad-specific breakpoints.
• Introduced a new spacing value ipad-status-bar for the iPad status bar height.

App.tsx

• Updated the main container to include ipad:pt-ipad-status-bar, adding proper top padding on iPads.

Header.tsx

• Adjusted the header component to account for the status bar on iPads using iPad-specific Tailwind classes.

Screenshots

iPad 10th Generation (Portrait)

iPad 10th Generation (Landscape)

iPhone 16 Pro Max

iPhone SE 3rd Generation

iPad Pro 13-inch (M4)

Testing

• Verified that the status bar no longer overlaps with content on iPad devices.
• Tested in both portrait and landscape orientations on iPads.
• Ensured the header and main content are properly positioned below the status bar on iPads.
• Used only Tailwind CSS classes for styling adjustments.

[Xeno-Tek]

@VIKTORVAV99,
I've implemented the changes using Tailwind CSS to address the status bar overlap issue. Please let me know If this works.

[VIKTORVAV99]

@Xeno-Tek are those new screenshots?
They still show that the map is not behind the status bar / safe area. Which we wanted to keep.

[Xeno-Tek]

@VIKTORVAV99 Thanks for pointing that out! I initially thought it was acceptable for the map not to overlay the safe area insets, but I've gone ahead and adjusted it as per your feedback. The map now correctly overlays the safe area insets.

1. Updated main.tsx:
   • Added CSS variables for safe area insets.
   • Created new utility classes for extending content to the top edge and handling content within safe areas.
   • Added padding to the root element to account for the safe area top inset.
2. Modified MapWrapper.tsx:
   • Added the extend-to-top-edge class to the map container div to allow it to extend behind the status bar.
3. Updated ZoomControls.tsx:
   • Implemented dynamic top margin calculation based on the safe area top inset.
   • Used a useEffect hook to update the top margin on component mount and window resize.

Preview Images

iPad 10th Generation (Portrait)

iPad 10th Generation (Landscape)

iPhone 16 Pro Max

iPhone SE 3rd Generation

iPad Pro 13-inch M4

[VIKTORVAV99]

While this seems to work it does this by adding duplicate styles which will be hard to debug later.

There is also files changed in this PR that should not be changed at all which needs to be cleaned up before merging.

[Xeno-Tek]

@VIKTORVAV99 Ive made the changes according to your feedback, please check the files changed.

Test Results After Implementation of Changes

iPad 10th Gen - Portrait Mode

iPad 10th Gen - Landscape Mode

iPhone 16 Pro Max