How do we address the problem with live samples displaying with an incorrect height

[schalkneethling]

There is a problem with the height of live samples that is a regression from before the redesign. Although the problem also exists for interactive examples, the priority is around live samples. In some cases, the problem is just annoying and bad UX but, in some places(especially the learn area) the iframe is so small you can hardly see the content.

Some options

• Yari could add a bit of extra sizing to make up for the additional padding introduced by the redesign
• Could be fixed in content, but this is a ton of work potentially. Even if it is scripted, there will be a lot of review work.
• Yari could figure out the height and set it dynamically? This could be a much bigger engineering effort as there should also be a height override the author could specify.
• We could just remove the extra padding that was introduced.
• We could also see if adding box-sizing: content-box; solves the problem.

From a discussion with the folks at OWD, there is a strong preference for:

1. Removing the padding that was introduced by the redesign, or
2. Experimenting with box-sizing: content-box; to see if it could solve the problem.

/cc @mdn/yari-content @mdn/core-dev

[Guyzeroth]

@schalkneethling Do you have any background on why more padding was added? My preference would be to just remove it 👍

[schalkneethling]

I am honestly not sure, I was not super involved in the implementation but yes, removing the padding would probably be the easy fix here.

[fiji-flo]

Can you point us to some examples. I couldn't see any broken live sample. Or does it depend on screen size?

[schalkneethling]

@teoli2003, @wbamberg could you please point @fiji-flo to some examples where the problem occur? Thank you.

[wbamberg]

There's a screenshot of a particularly bad one at mdn/yari#6445, I fixed that one in content but you could see it archived at https://web.archive.org/web/20220422205655/https://developer.mozilla.org/en-US/docs/web/css/@font-face#examples .

It depends how much free space the original example had. I will find some that are still live in a bit.

[schalkneethling]

Thank you, Will.

[wbamberg]

Here's another example which is bad: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#ems_and_rems

This is one of those places where we are abusing the live sample system to make an interactive editor. We shouldn't be doing this anyway, but: given that we are, the editor has a "Reset" button at the bottom that is cut off because of the overflow. I fixed a bunch like this in content, but it would be nice to fix it once in the platform.

My preference would be to just remove it 👍

I would be happy with that :).

[fiji-flo]

Thanks @wbamberg

[fiji-flo]

@schalkneethling I'm all for dropping this line: https://github.com/mdn/yari/blob/main/client/src/document/index.scss#L331 aka solution 1.

[schalkneethling]

Alrighty, let’s do it.

[schalkneethling]

@fiji-flo @wbamberg mdn/yari#6506