fix: tale version panel height, file-browser loading indicator, css prettification on all of run-tale view

[bodom0015]

Problem

Tale Versions Panel has some odd styling concerns - default size is a bit too small, scroll bars always show even when not needed

Fixes #290

Approach

Clean up the styling here to improve the look&feel of the Tale Versions Panel

Default state (no versions created):

With one or more versions created (do not show scroll bars):

With many versions created (show scroll bars):

How to Test

Prerequisites: at least one Tale created that your have access to

1. Checkout this branch locally, rebuild the dashboard
2. Login to the WholeTale Dashboard
3. Navigate to Run Tale and expand the Tale Versions Panel on the right
   • You should see the Version timeline now has slightly better styling
4. Add a few more versions
   • You should see that scroll bars only appear if timeline content becomes too long to fit on the screen

[craig-willis]

Totally not important, but just noting that the Version History panel with this PR is a little shorter than the iframed IDE.

[bodom0015]

Yeah setting height to fill the available space of the parent is a bit painful, so matching the iframed window precisely is not trivial. Using SCSS calc() might be a better approach here, as we used this heavily in the EmberJS side due to the footer, but this should work as a decent fix until I can think of a cleaner way to do that which wouldn't require hard-coding an arbitrary height in pixels or percentage.

The main changes here were to a) hide the scroll bars unless they're needed for overflow, and b) set a hard-coded height so that the version list does not visibly grow as users add versions as this. Note that 45vh translates to "45% of the viewport height", so this should work for most screen sizes. I probably need to test this more throughly on different screen sizes to make sure that it still looks nice for most common options, but I don't have a really easy way to do that aside from resizing the window.

There are still a few quirks here that I can't get rid of. You'll notice, for example, that if you add a few versions and the scrollbar appears that there's a large whitespace at the bottom of the timeline that allows you to scroll to it but cannot / does not contain any content - I cannot for the life of me find where this additional margin is coming from to get rid of it :/

[bodom0015]

I spent a little bit more time on the CSS here to make things a bit prettier:

• Removed excess margin/padding around Interact tab, Files tab, and Tale Version Panel to make them sit flush up against each other
• Double-checked scroll height behavior for all three of the above to make sure I didn't break anything else there
• Using existing logic, added loading indicator to the table in the file-browser of the Files tab
• Match the height of the interact tab with tale-versions-panel - this pointed to a long-standing issue where Semantic UI decided to set negative margins by default (warning: this file is huge and may crash your browser)

There is still a bit of unused/unscrollable space at the bottom of each (the height of this varies depending on screen size), but I think this is a significant overall improvement to the look and feel :+1:

Interact Tab alone:

Files Tab alone:

Interact Tab w/ Versions Panel:

Files Tab w/ Versions Panel: