We were trying to compute the tutorial pane's height directly to the scroll height of the content plus a hard-coded buffer, and I think the fixed buffer eventually got out of date when the styles changed.
Rather than simply updated the buffer size to a different fixed value, I set the height to auto which just dynamically resizes to fit content (Googling tells me it's well supported across different browsers, so I think it's safe).
There was also an issue where the clientHeight / scrollHeight comparison was slightly off when determining if there was overflow because the clientHeight value contains padding, which eats into the actual "user visible" area for the child content. I've added a function to calculate the height without the padding to account for this
Show More/Less
While testing, I noticed the "Show More"/"Less" toggle appeared and disappeared somewhat randomly (even without my changes). The check we were doing for this was always based on the current size of the element, so I believe the decision on whether to show it was being affected by whether the element was actually expanded (i.e. "Show More") or not. This led to inconsistent-feeling behavior.
I reworked this so it's now based on the initial size as a "default" and not just the latest current size. I also moved it to the left when the toolbox is hidden, since it was just empty space before and I think it's better than overlapping the undo/redo buttons.
Fixes https://github.com/microsoft/pxt-minecraft/issues/2579
Height Calculation
We were trying to compute the tutorial pane's height directly to the scroll height of the content plus a hard-coded buffer, and I think the fixed buffer eventually got out of date when the styles changed.
Rather than simply updated the buffer size to a different fixed value, I set the height to
autowhich just dynamically resizes to fit content (Googling tells me it's well supported across different browsers, so I think it's safe).There was also an issue where the clientHeight / scrollHeight comparison was slightly off when determining if there was overflow because the clientHeight value contains padding, which eats into the actual "user visible" area for the child content. I've added a function to calculate the height without the padding to account for this
Show More/Less
While testing, I noticed the "Show More"/"Less" toggle appeared and disappeared somewhat randomly (even without my changes). The check we were doing for this was always based on the current size of the element, so I believe the decision on whether to show it was being affected by whether the element was actually expanded (i.e. "Show More") or not. This led to inconsistent-feeling behavior.
I reworked this so it's now based on the initial size as a "default" and not just the latest current size. I also moved it to the left when the toolbox is hidden, since it was just empty space before and I think it's better than overlapping the undo/redo buttons.
See It, Try It
Upload Target
Screenshots
