mdn
fix: live sample scrollbar due to the iframe border
Summary
The PR #6506 removed padding from the live sample iframe. But the scrollbars still remain:
Problem
The scrollbar issue hasn't been completely fixed due to 1px border.
Solution
Use outline instead of border. Setting outline-offset gives feeling of padding.
Screenshots
Before
After
Light mode
Dark mode
The box-shadow fills the gap between the outline and iframe edges.
How did you test this change?
In Firefox and chromium browsers on Fedora
@OnkarRuikar Is it intentional that the live samples now stand a bit out on the left? Could we fix this by adding horizontal margin?
Is it intentional that the live samples now stand a bit out on the left? Could we fix this by adding horizontal margin?
The element is visually bigger now due to the outline.
I've reduced the width and shifted it to the right:
Thank you! Could you please rebase once more on the latest main and run yarn stylelint --fix once to make stylelint happy? 🙏 Sorry about that!
FWIW The screenshots were taken from https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/isPointInStroke#examples.
Looking at the latest version of this branch (before my changes that I have meanwhile reverted, as they didn't work as expected), the result is not the same as before the removal of the padding (live samples used to be aligned with the code samples).
- This branch:
- Previously with padding:
(Source: http://localhost:3000/en-US/docs/Web/HTML/Element/label#examples)
Even though this box-shadow/outline workaround is very clever, it doesn't look like it can restore the previous visual state. Therefore I will go ahead and close this PR for now.
The way forward is:
- Restore the iframe padding of 1rem,
- Add 2rem to the height in
EmbedLiveSample.ejs(i.e.style="height: calc(${height}px + 2rem)").
Naturally, this will cause some live samples to be too high, but those live samples definitely don't have the right height now, as they shouldn't account for padding added by yari.
/cc @fiji-flo @wbamberg