Bug: AlignWide content clipped
spaceninja opened this issue · 2 comments
At some viewport sizes, content with the alignwide class is being clipped by the viewport. In the attached screenshot, the viewport is 1265px wide, but the alignwide content is 1280px wide. I'm guessing the vw calculations are off somehow — perhaps due to visible scrollbars?
Tangent: Would be cool if we could use progressive enhancement to use the new viewport units in supported browsers
So I see two issues here.
One issue is small: The Deck block probably needs to add padding when its alignment is wide or full. Even if the scrollbar width is restored, this example shows that horizontal padding is still necessary to keep content from running into the margins.
The second issue is larger: We aren't accounting for scrollbars in our calculation. That's been true of our main site since 2016, it's something I talk about in my original article. It just hasn't come up because, most of the time, those 15 pixels haven't included valuable information.
The fix for that is known: Use svw where its supported, and use custom properties and a JavaScript calculation where it isn't as a fallback.
But I have a feeling that if we solve the first issue, we'll have a lot less compelling reason to prioritize the second. And if we wait just a bit longer, we may not need the JavaScript-based fallback... svw support is already in Firefox and Safari, and it's behind a flag in Chrome.
So I'm going to create a separate issue for the padding thing, and I'm going to keep this issue open but out of this project as a showstopper.