-
Notifications
You must be signed in to change notification settings - Fork 937
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fixed Issue #6966 [Status bar overlap on iPads using Tailwind CSS] #7310
base: master
Are you sure you want to change the base?
Conversation
@VIKTORVAV99, |
@Xeno-Tek are those new screenshots? |
@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.
Preview ImagesiPad 10th Generation (Portrait)iPad 10th Generation (Landscape)iPhone 16 Pro MaxiPhone SE 3rd GenerationiPad Pro 13-inch M4 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Podfile.lock: Removed empty space at line 16. ZoomControls.tsx: Using CSS marginTop instead of UseEffect(). Map.tsx: Added inset: 0, marginTop: 'calc(var(--sat) * -1)' to the style instead of creating element for Map.
@VIKTORVAV99 Ive made the changes according to your feedback, please check the files changed. Test Results After Implementation of ChangesiPad 10th Gen - Portrait ModeiPad 10th Gen - Landscape ModeiPhone 16 Pro Max |
Please stop merging master into this. I get a notification every time you do... |
@VIKTORVAV99 @tonypls, could you please let me know when the PR will be reviewed? I'm working on this as part of my assignment, so I won't be able to contribute or make fixes after my report is completed. |
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
ipad-status-bar
for the iPad status bar height.App.tsx
ipad:pt-ipad-status-bar
, adding proper top padding on iPads.Header.tsx
Screenshots
iPad 10th Generation (Portrait)
iPad 10th Generation (Landscape)
iPhone 16 Pro Max
iPhone SE 3rd Generation
iPad Pro 13-inch (M4)
Testing