Fix editor scrolling on Code Bridge

[molly-moen]

This PR makes it so the Code Bridge editor scrolls horizontally and vertically. Currently on Python Lab you can see both scroll bars (if the content is bigger than the bounding box), and in Web Lab 2 you can see both if you are in "vertical layout". If you are in horizontal layout on Web Lab 2 you can see the vertical scrollbar, and the editor scrolls horizontally, but the scrollbar seems to be off the bottom of the screen. I tried to fix this for a bit but couldn't figure it out. Since Web lab 2 isn't the priority right now and it has some extra stuff we need to eventually get rid of (the layout buttons at the top), I left it in that state for now.

As part of this I also added a 1px gap between the columns/rows in the grid layout. I was trying to fix the scroll bar issue on web lab 2, but this is something we will want to get closer to the figma so I left it in.

This PR also has the side benefit of a little Java Lab fix. Java Lab scrolled horizontally and vertically, but you could only see the horizontal scroll bar if you were scrolled to the bottom of the file. Now you can always see it.

Screen shots

Python Lab

The scroll bar is there, but it's hidden by the teacher panel. Another thing to think about with the teacher panel.

Web Lab 2, vertical layout

Web Lab 2, horizontal layout

Links

• jira ticket: CT-591

Testing story

Tested locally

PR Checklist:

• Tests provide adequate coverage
• Privacy and Security impacts have been assessed
• Code is well-commented
• New features are translatable or updates will not break translations
• Relevant documentation has been added or updated
• User impact is well-understood and desirable
• Pull Request is labeled appropriately
• Follow-up work items (including potential tech debt) are tracked and linked

[molly-moen]

I moved these to application.scss so they could be reused for Code Bridge. These are codemirror-specific selectors.

[thomasoniii]

lgtm 🚀

[mikeharv]

Looks good to me!