Conversation
There was a problem hiding this comment.
Pull request overview
Adds iOS safe-area support so the layout renders correctly on devices with notches/home indicators, leveraging viewport-fit=cover plus CSS env(safe-area-inset-*).
Changes:
- Enable full-bleed iOS layouts via
viewport-fit=coverin the viewport meta tag. - Add safe-area-aware padding for the sticky header (top) and footer (bottom).
- Adjust page height/background handling (HTML background +
bodymin-height).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| assets/css/site.scss | Adds safe-area padding (header/footer) and adjusts background/min-height to better fit mobile viewports. |
| _includes/head.html | Updates viewport meta to allow content to extend into iOS safe areas (viewport-fit=cover). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| html { | ||
| scroll-behavior: smooth; | ||
| background: linear-gradient(180deg, #f5f8fb 0%, #ebf1f7 100%); | ||
| } |
There was a problem hiding this comment.
scroll-behavior: smooth combined with a sticky header means in-page #section navigation can land with the target content hidden under the header. Since the header height now varies with env(safe-area-inset-top), consider adding scroll-padding-top on html (or scroll-margin-top on section anchors) using the header height + safe-area inset so hash-link navigation consistently positions content below the header.
| @@ -43,6 +44,7 @@ html { | |||
|
|
|||
| body { | |||
| margin: 0; | |||
There was a problem hiding this comment.
min-height: 100svh has no effect in browsers that don’t support the newer viewport units, which can regress full-viewport layout/background coverage. Consider adding a min-height: 100vh fallback before 100svh so older Safari/Chromium versions still get a sensible minimum height.
| margin: 0; | |
| margin: 0; | |
| min-height: 100vh; |
| position: sticky; | ||
| top: 0; | ||
| z-index: 20; | ||
| padding-top: env(safe-area-inset-top); |
There was a problem hiding this comment.
Only the top safe-area inset is applied here. In iPhone landscape, safe-area-inset-left/right can be non-zero and the header’s inner content (via --shell = 100vw - 2rem) can still extend into the unsafe region. Consider also applying left/right safe-area padding (e.g., padding-inline) to the header (or adjusting the shell calculation) so navigation/brand content stays fully within the safe area.
| padding-top: env(safe-area-inset-top); | |
| padding-top: env(safe-area-inset-top); | |
| padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); |
| @@ -526,7 +529,7 @@ h1 { | |||
| } | |||
|
|
|||
| .site-footer { | |||
There was a problem hiding this comment.
If you need to support older iOS Safari versions, env(safe-area-inset-*) may require a constant(safe-area-inset-*) fallback to work. Consider adding the constant() form before env() for both the header and footer safe-area padding declarations.
| .site-footer { | |
| .site-footer { | |
| padding: 2rem 0 calc(3rem + constant(safe-area-inset-bottom)); |
No description provided.