In commit https://github.com/microsoft/pxt/commit/a7e5cdee61f04a8c86a25bc6d7aaf4787ed231d3, I changed the height of the tutorial card to "auto" instead of a fixed value, and that meant the child (with height 100%) started overflowing when it exceeded the size of the parent. To fix this, I just set a max height on the child that's tied to the max height of the parent - basically the same setup we have for when the instructions are minimized, just at a bigger size.
I also made it so code snippets can wrap on spaces. There are some long-ish lines of code (or code-like) snippets in the Minecraft HOC tutorial, and they can cause horizontal scrolling on small widths, since code snippets are currently set to not wrap (for example, ||hoc:HeadWear, MidWear, and LowerWear|| in costume_python_activity3.md). I think it's okay to break these on spaces, at the very least.
Lastly, I moved the "Show More"/"Less..." toggle down just a smidge since it was overlapping the text.
Fixes https://github.com/microsoft/pxt-minecraft/issues/2601 Fixes https://github.com/microsoft/pxt-minecraft/issues/2603
In commit https://github.com/microsoft/pxt/commit/a7e5cdee61f04a8c86a25bc6d7aaf4787ed231d3, I changed the height of the tutorial card to "auto" instead of a fixed value, and that meant the child (with height 100%) started overflowing when it exceeded the size of the parent. To fix this, I just set a max height on the child that's tied to the max height of the parent - basically the same setup we have for when the instructions are minimized, just at a bigger size.
I also made it so code snippets can wrap on spaces. There are some long-ish lines of code (or code-like) snippets in the Minecraft HOC tutorial, and they can cause horizontal scrolling on small widths, since code snippets are currently set to not wrap (for example,
||hoc:HeadWear, MidWear, and LowerWear||in costume_python_activity3.md). I think it's okay to break these on spaces, at the very least.Lastly, I moved the "Show More"/"Less..." toggle down just a smidge since it was overlapping the text.