Improve bundle view responsiveness.

[leilenah]

Reasons for making this change

Unwanted horizontal scrolling can be observed when bundle content (like command, stdout, stderr, etc) has long lines (see sample screen recording below). This change prevents that unwanted scrolling.

I have also added css that collapses the bundle view at the 600px breakpoint, ordering the bundle sidebar above the bundle content. This prevents the bundle view from becoming squished.

Related issues

#4216

Screenshots

Before [prod]

20220926200732803.mp4

After [local]

20220926200818947.mp4

Checklist

• I've added a screenshot of the changes, if this is a frontend change
• I've added and/or updated tests, if this is a backend change
• I've run the pre-commit.sh script
• I've updated docs, if needed

[percyliang]

I can imagine there are times when you don't want wrapping, because it might be confusing where lines start (e.g., for code). I'm not sure - what do you think?

Can we look at the real worksheets from the gallery on prod (https://worksheets.codalab.org/worksheets/0x818930127c4d47de84c1ceaadf04d014/) and see how it feels?

[leilenah]

@percyliang we basically have to choose between wrapping and the horizontal scroll. I was thinking that people who encounter wrapping can still expand their screen (to an extent of course) in order to un-wrap things. They're also able to open the output in a new window for more space.

As a user I think I would prefer wrapping to horizontal scroll, but I don't feel strongly. Lmk your preference 👍

[percyliang]

I see the benefits of both. Do you have any thoughts from the real worksheets?

[leilenah]

@percyliang based on the worksheets on prod, I am leaning towards wrapping over having a horizontal scrollbar. I'm being tipped into that direction due to the fact that for the expanded bundle view, the horizontal scroll bar appears way at the bottom of the content. So the user may not instantly realize why some of their output is getting cut off. E.g.

With wrapping, it may seem more intuitive to expand your screen or open up the output in a new window.

[percyliang]

Wrapping it is then!