Feature/#340 UI scroll refactor

[iguannalin]

No description provided.

[isaisabel]

Summary: fantastic start, all the required changes are there but it needs a bit of cleanup.

Toolbar section headers

When the tabs are hidden, the toolbar section headers are as well. This is fine. However, the sleight overlap with the toolbar creates a white pixel within the toolbar, which looks strange. Removing the white border or the overlap should rectify this issue. The white border is for visibility when many layers are open simultaneously.

Also interacts strangely with tabs when window is narrow or many tabs are present:

Create layer from other layers compatability

1. Create layer from other layers marks tabs with a variable name for use in the score input. The variable marker is no longer aligned readibly due to the padding removal:
   
2. The user can scroll in that interface, hiding the layer variable marker from view when the tabs hide. It may be worth only allowing the tabs to be hidden on scroll when on a layer tab. Alternatively, move the layer variables from the tabs themselves into a list adjacent to the input (would require documentation updates)
3. Image in help page of layer variables probably needs to be recreated with new UI:

Bug with changing tabs

If the user scrolls partway down the page and then closes the last tab or switches tabs otherwise, the tab bar may be hidden even though the scroll is now at the top of the screen. This can make the tabs bar inaccessible. To fix this, recompute the amount of hidden tab every time a layer is changed.

Active tab color and style

1. Active tab doesn't need the bottom border color (a separate element of class and type mat-ink-bar) since it's already denoted by background color:

2. Tab is actually a different color than the toolbar. It should be the same color. This is because mat-tab-link has an opacity of 0.6 when not focused. Removing this will improve the UI:

Invisible help button

For some reason there is an invisible help button to the right of the new tab button.

Seems to be a white help button that is usually invisible, can be seen when banner is present:

Screen.Recording.2021-08-31.at.3.03.01.PM.mov

Closing a tab enables the accessibility scroll arrows

Closing a layer tab for some reason enables the scroll arrows even though there's nothing to scroll to. Opening a new tab removes them.

Banner issues

Banner interacts strangely with tabs, and the help button in the banner is not properly aligned.

Banner should scroll out of view alongside tabs, but currently only the tabs area scrolls when the user scrolls.

[isaisabel]

Looks great! I have found a few bugs and have one design concern.

1. the floating help button covers some of the layer controls when scrolled. Maybe the help button shouldn't be floating, and instead scroll out of view when the tabs hide?

   

2. When the banner is present, the user can create multiple scrollable areas if the viewport is short, which is a bit strange. Depending on mouse position different areas scroll which is very strange to work with: