Home page exceeds page's dimensions on Chromium-based browsers #470
Conversation
apps/website/src/app/page.tsx
Outdated
| @@ -27,7 +27,8 @@ export default function Home() { | |||
| alt="Midnight whispers image" | |||
| src="https://semaphore.cedoor.dev/midnight-whispers.jpg" | |||
| objectFit="cover" | |||
| w="full" | |||
| minWidth="100%" | |||
There was a problem hiding this comment.
We could not need this. I've tried it with overflowX: "hidden" only and it works. Could you double-check?
There was a problem hiding this comment.
You mean, the w="full"?
There was a problem hiding this comment.
Sorry, * we could not need this.
overflowX: "hidden" could be enough for making it work.
There was a problem hiding this comment.
No, if you remove the parameter minWidth="100%" the images do not extend horizontally and you get something like this
There was a problem hiding this comment.
Umh I'm trying it with w="full" and it works
There was a problem hiding this comment.
Yes, maintaining w="full" works since is equivalent to min & max at 100%. Lmk which ones do you prefer
There was a problem hiding this comment.
Mmh I'd reduce the number of changes in this PR to the bare minimum.
There was a problem hiding this comment.
Better for consistency across images, see last commit
There was a problem hiding this comment.
There's still another image to update
apps/website/src/app/page.tsx
Outdated
| @@ -27,7 +27,8 @@ export default function Home() { | |||
| alt="Midnight whispers image" | |||
| src="https://semaphore.cedoor.dev/midnight-whispers.jpg" | |||
| objectFit="cover" | |||
| w="full" | |||
| minWidth="100%" | |||
There was a problem hiding this comment.
Mmh I'd reduce the number of changes in this PR to the bare minimum.
apps/website/src/app/page.tsx
Outdated
| @@ -27,7 +27,8 @@ export default function Home() { | |||
| alt="Midnight whispers image" | |||
| src="https://semaphore.cedoor.dev/midnight-whispers.jpg" | |||
| objectFit="cover" | |||
| w="full" | |||
| minWidth="100%" | |||
There was a problem hiding this comment.
There's still another image to update
apps/website/src/app/page.tsx
Outdated
| @@ -27,7 +27,8 @@ export default function Home() { | |||
| alt="Midnight whispers image" | |||
| src="https://semaphore.cedoor.dev/midnight-whispers.jpg" | |||
| objectFit="cover" | |||
| w="full" | |||
| minWidth="100%" | |||
Description
To solve this, I set the
overflowXproperty in the body tohidden(to prevent the content from overflowing horizontally into the parent element's box) and addedminWidthandmaxWidthinstead ofwidth, stretching the image to the maximum for the page layout size.Related Issue
#462
Does this introduce a breaking change?