Skip to content

Fix landscape view on mobile devices#234

Merged
bravo-kernel merged 15 commits into
pester:masterfrom
fflaten:fix-iphone-landscape
Sep 5, 2022
Merged

Fix landscape view on mobile devices#234
bravo-kernel merged 15 commits into
pester:masterfrom
fflaten:fix-iphone-landscape

Conversation

@fflaten

@fflaten fflaten commented Sep 3, 2022

Copy link
Copy Markdown
Collaborator

Extends header, footer etc stretch across the whole screen on devices on devices with camera notches or other non-rectangular screens.

Uses padding with safe-area-inset-* env-variables set by the device to avoid content being show behind camera etc.

Before:
before

After:
after

after footer

after sidebar

Fix #223

@fflaten fflaten changed the title FIx landscape view on mobile devices Fix landscape view on mobile devices Sep 3, 2022
@fflaten fflaten marked this pull request as ready for review September 3, 2022 22:51
@fflaten

fflaten commented Sep 3, 2022

Copy link
Copy Markdown
Collaborator Author

After two bug reports, one Docusaurus feature request and hours wasted on what I think is just Netlify preview cache messing with me, this is ready for review.

I've only tested this on pc and iPhone 12, so someone should test on other devices before merging. Especially landscape mode on device with notch/pinhole or Browerstack (maybe?) if possible.

@bravo-kernel

Copy link
Copy Markdown
Collaborator

Awesome job, lots of 🧙‍♂️. I am only able to test on a very small iPhone and it looks good to me. Personally, I think we should just merge this in and take it from there. What do you say?

@fflaten

fflaten commented Sep 4, 2022

Copy link
Copy Markdown
Collaborator Author

Personally, I think we should just merge this in and take it from there. What do you say?

Sounds good.

@bravo-kernel bravo-kernel merged commit 34fb868 into pester:master Sep 5, 2022
@fflaten fflaten deleted the fix-iphone-landscape branch September 5, 2022 07:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Extend header and footer into safe-area

2 participants