Navigation List view: scroll horizontally when table overflows

[MaggieCabrera]

What?

When we have menu sub menus the whole sidebar will have a scrollbar. This PR makes the list view the only part of the sidebar that will overflow because of this and makes some adjustments to keep spacing tight and improve UX like forcing the max width of each menu item to be the same as the sidebar width. That allows for us to see the edit buttons on the items you don't need to scroll to see without actually having to scroll :D

Closes #45446

Why?

It was a bad user experience to force the user to scroll the whole sidebar in these cases.

How?

I'm adding an extra class to target the table for the overflow and forcing a max width on the rows so the edit icon doesn't always appear at the far end of however width the table is.

Testing Instructions

Create a Menu with multiple sub menus nested and hover over them. Check that the scroll only affects the list view.

Screenshots or screencast

Before	After

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[getdave]

I tested this and it worked as described. It's much better.

Left some code comments which we may wish to discuss with other contributors specifically regarding how we approach branching in the CSS/visual styles.

[getdave]

What does 2 * $grid-unit-20 represent? Sidebar padding? If so shall we make a Sass var to represent that?

[MaggieCabrera]

yes, it's sidebar padding, I just used the same var that the actual sidebar was using, since it's not defining one itself!

[getdave]

Oh that's weird. I just see this and think "oh that represents something but I'm not sure what".

If it was a var $sidebar-padding I wouldn't have to interpret the code and it would be more readable.

I think we should do it but it's up to you 🙇

[getdave]

Feel free to ping me again when you're ready for a re-review.

[MaggieCabrera]

I still need the extra div because the class needs to go outside the table element, but I'm only using the new classes to style it. I don't think we need to remove or change the spacing for the icons now, so I removed that as well:

[getdave]

❤️

[getdave]

Looking good. Thanks for being receptive to all the feedback nits 🤝

[getdave]

@MaggieCabrera Looks like we have some random static analysis errors. I re-ran the tests but if it doesn't pass you might want to rebase first.

[MaggieCabrera]

Tests passed, I'm merging this, but we can revisit if there are any other design/UX concerns @SaxonF