refine scrolling options for function pseudocode container

[Linda-Njau]

The pseudocode.cds--snippet.cds--snippet--multi class, which displays the function pseudocode for instructions, currently has both a Show more button and a vertical scrollbar. Since both serve the purpose of revealing additional text length-wise, only one should be retained for clarity and usability.
Additionally, the container has a horizontal scrollbar that makes it difficult to read full sentences without scrolling sideways. The horizontal scrollbar should be removed, and the text should be displayed in full width to improve readability.

[ThinkOpenly]

The pseudocode.cds--snippet.cds--snippet--multi class, which displays the function pseudocode for instructions, currently has both a Show more button and a vertical scrollbar. Since both serve the purpose of revealing additional text length-wise, only one should be retained for clarity and usability.

While I agree that conceptually, there is some overlap, these two controls do serve different purposes:

• The scrollbar is used to scroll in the initial limited size window.
• The "show more" button (which is really large) is used to expand the limited size window to full size, showing all of the code.

Once expanded, the scrollbar is removed, and the button changes to "show less", so they work together.

I'm reluctant to fully expand the code window always because there could be 100s of lines of code.

I've seen text input boxes (like the one I'm typing in now) that can be manually stretched. Can that be done for displayed text? Then the user can get the size they want, rather than just a choice of "10 lines" or everything.

the container has a horizontal scrollbar that makes it difficult to read full sentences without scrolling sideways. The horizontal scrollbar should be removed, and the text should be displayed in full width to improve readability.

The challenge here is that I suspect some of the Sail code is fairly wide already, and it can be arbitrarily wide absent good coding practices for readability.

Currently, though, the font used for the code snippet is quite large. I would not mind at all if that were made smaller.

In general, I don't think you can eliminate the horizontal scrollbar in all cases. Note that I don't see a horizontal scrollbar where one is not because the code is narrow enough. Maybe a smaller font for the code will cover most cases sufficiently?

[Linda-Njau]

I've seen text input boxes (like the one I'm typing in now) that can be manually stretched. Can that be done for displayed text? Then the user can get the size they want, rather than just a choice of "10 lines" or everything.

I'm sure we can implement manual stretching, and this would definitely give the user more control, but I wonder about the tradeoffs. First of all, I think the show more/show less button is more intuitive (and perhaps more accessible) than the double-sided arrow that's usually used for stretching. Secondly, performance with a dynamically resizable display might be slower. With the show more/show less button, the reflow is triggered once when the button is clicked, but with the stretchable design, reflows happen at every stretch, which might introduce some lag. Another thing, for the really long pseudocode blocks, manually stretching to the end might be tedious for the user. We could consider a solution that combines both the manual stretch and the show more/show less button. However, this would still leave the performance-related issues with the stretchable design Then again, if giving the user more control over the amount of pseudocode they can see is a priority for us, there are techniques we could implement to mitigate the performance issues with the stretchable design.

If we do choose the show more/show less design, I agree on the suggestion to make the button smaller and to also integrate the button's color scheme for the dark mode.

Currently, though, the font used for the code snippet is quite large. I would not mind at all if that were made smaller.

In general, I don't think you can eliminate the horizontal scrollbar in all cases. Note that I don't see a horizontal scrollbar where one is not because the code is narrow enough. Maybe a smaller font for the code will cover most cases sufficiently?

I agree, let's make the font a little smaller.
Wha do you think about making the pseudocode container a little wider? This would also help cover more cases and it would be a better use of the real estate on the right of the container.

[ThinkOpenly]

If we do choose the show more/show less design, I agree on the suggestion to make the button smaller and to also integrate the button's color scheme for the dark mode.

I think your original proposal for "one or the other, but not both" is fine. Show more/less button only is probably the best balance, because you can have a compressed display by default, and you can still see everything with a single click.

Currently, though, the font used for the code snippet is quite large. I would not mind at all if that were made smaller.

In general, I don't think you can eliminate the horizontal scrollbar in all cases. Note that I don't see a horizontal scrollbar where one is not because the code is narrow enough. Maybe a smaller font for the code will cover most cases sufficiently?

I agree, let's make the font a little smaller. Wha do you think about making the pseudocode container a little wider? This would also help cover more cases and it would be a better use of the real estate on the right of the container.

Completely agree. I'm not sure why that area is left unused currently, but it could definitely be better used by the pseudocode display, since that needs the wider area anyway.