Homepage hero: fix SSR hydration flash and portrait desktop layout#667
Merged
Wituareard merged 5 commits intoPauseAI:mainfrom Feb 23, 2026
Merged
Conversation
- Replace JS isMobile/resize listener with <picture> + <source media> so the browser picks mobile vs desktop image natively, eliminating the SSR hydration flash - Change mobile breakpoint from (max-width: 850px), (orientation: portrait) to (max-width: 850px) and (orientation: portrait) so large portrait windows (e.g. half-screen 4K) don't get the mobile layout - Switch object-fit from contain to cover to eliminate the letterbox gap that exposed the CSS background color (fixes Dark Reader two-tone artifact) - Remove transform: scale(0.95) which was adding extra exposed background
- Revert object-fit back to contain (cover was hiding intentional orange background above the image) - Restore transform: scale(0.95) with transform-origin: center bottom - Update scale media query to complement the new mobile condition: (min-width: 851px), (orientation: landscape) instead of the old (min-width: 851px) and (orientation: landscape)
✅ Deploy Preview for pauseai ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
RisingOrange
changed the title
Merged
Wituareard
reviewed
Feb 22, 2026
Collaborator
|
Looks good, I'll approve the preview later and then merge. Thanks! |
Collaborator
|
Thanks! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #668
Summary
Fixes two issues with the homepage hero section's image selection and layout logic.
isMobile+ resize listener) with a native<picture>+<source media>element, so the browser picks the correct image before any JS runs — eliminating the SSR hydration flash on mobile(max-width: 850px), (orientation: portrait)(OR) to(max-width: 850px)(width only), so large portrait windows on desktop (e.g. a half-screen 4K monitor) no longer incorrectly get the mobile layoutscale(0.95)media query to the complement:(min-width: 851px)Note: landscape mobile did not look great before this PR either — this is a pre-existing limitation, not a regression.
Screenshots
Vertical window on desktop
Landscape mobile (known limitation)
Test plan