Skip to content
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.

Sign up for GitHub

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

Jump to bottom

iOS header overlaps with UI #6966

Open
corradio opened this issue Jul 9, 2024 · 6 comments · May be fixed by #7294
Open

iOS header overlaps with UI #6966

corradio opened this issue Jul 9, 2024 · 6 comments · May be fixed by #7294
Assignees
@Xeno-Tek
Labels
bug 🐞 frontend 🎨

Comments

@corradio
Copy link
Member

corradio commented Jul 9, 2024

Describe the bug
The iOS header (time, date, battery etc..) overlaps with the UI (see top right of the screen).

To Reproduce
Open app

Expected behavior
iOS header should not overlap

Screenshots
Screenshot 2024-07-09 at 14 15 47 jpeg

Additional context
Using the app on iPad (classic)
@corradio corradio mentioned this issue Sep 23, 2024
Open
@Xeno-Tek
Copy link

Xeno-Tek commented Oct 6, 2024

Could I work on this issue ?

@Xeno-Tek
Copy link

Xeno-Tek commented Oct 6, 2024 •
edited
Loading

Screenshot 2024-10-06 at 6 54 37 pm

Removed the overlap on iPad 10th generation.

@Xeno-Tek
Copy link

Xeno-Tek commented Oct 6, 2024

Screenshot 2024-10-06 at 7 29 20 pm

Works horizontally as well

@VIKTORVAV99
Copy link
Member

@Xeno-Tek can you make a PR so we can take a look at the code changes?

@Xeno-Tek Xeno-Tek mentioned this issue Oct 6, 2024
Closed
4 tasks
@Xeno-Tek
Copy link

Xeno-Tek commented Oct 6, 2024

I think I have a permanent fix, could I be assigned to work on this issue for the coming days.

Thank you very much

Screenshot 2024-10-06 at 10 32 31 pm

@VIKTORVAV99
Copy link
Member

@Xeno-Tek I've assigned you the issue. 🙂

Xeno-Tek added a commit to Xeno-Tek/electricitymaps-contrib that referenced this issue Oct 8, 2024
@Xeno-Tek
iOS header overlaps with UI electricitymaps#6966 (Fixed)
b7b5484 
fix: resolve iOS header overlap by adding safe area insets to CSS

- Added safe area insets to ensure proper padding for iOS devices
- Applied padding-top, padding-bottom, and side insets for better UI alignment
- Ensured header and layout are no longer blocked by system elements
@Xeno-Tek Xeno-Tek linked a pull request Oct 8, 2024 that will close this issue
Open
2 tasks
Xeno-Tek added a commit to Xeno-Tek/electricitymaps-contrib that referenced this issue Oct 8, 2024
@Xeno-Tek
Merge branch 'master' into issue-electricitymaps#6966-Branch
c60dc3a
@Xeno-Tek Xeno-Tek mentioned this issue Oct 8, 2024
Merged
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Xeno-Tek Xeno-Tek

Labels
bug 🐞 frontend 🎨
Projects
None yet
Milestone
No milestone
3 participants
@corradio @VIKTORVAV99 @Xeno-Tek