Fix cut off property tables

[binste]

PR addressing #2736. @joelostblom I restricted the type column to max. 200px after which the table looks pretty good:

However, I did not find a good way to make that column scrollable so I had to cut off overflowing values. All examples I found so far online had to do some fiddling with margins and paddings so that columns don’t fold into each other. E.g. https://www.w3docs.com/snippets/html/how-to-create-an-html-table-with-a-fixed-left-column-and-scrollable-body.html and https://stackoverflow.com/questions/3402295/html-table-with-horizontal-scrolling-first-column-fixed

I’m not very experienced with CSS so there might be a way to accomplish this after all. But I also don't think it's bad if the type is cut off as the very long values are not informative for most users anyway.

As mentioned in the issue, I would also be in favour of making the left sidebar a bit narrower:
(max_width: 20% instead of 25%)
To prevent some titles from folding, they could be shortened. I did not yet include this change in the PR but happy to add.

[joelostblom]

Looking promising, I made a few comments. I think I'm OK to reduce the left sidebar to 20% so feel free to include that here

[binste]

I played a bit around with the widths and I think 170px for the type column is a good value (at least based on the tables on the encoding page) as below a few types are cut off and going higher doesn't seem to be necessary as longer parameters are cut off anyway.

Regarding the first column, I'm not sure if we want to cut off the names of parameters which can happen by reducing max-width? Now it dynamically sizes the width based on the content and some parameter names need the space.

We could of course reduce the padding (green) around the name although I like the current version:

With 20% navbar as of latest commit:

Thoughts on shortening the 3 titles which take up two lines? Could remove the parts after the semicolon. Looks cleaner to me but maybe that's just personal taste.

[joelostblom]

Regarding the first column, I'm not sure if we want to cut off the names of parameters which can happen by reducing max-width? Now it dynamically sizes the width based on the content and some parameter names need the space.

I agree we don't want to cut these off. It looked to me like there was plenty of white space beyond even the longest parameter name which is why I thought there might be room to reduce it, but if you looked into it and it is actually adapting to the longest name then let's leave it as is.

Thoughts on shortening the 3 titles which take up two lines? Could remove the parts after the semicolon. Looks cleaner to me but maybe that's just personal taste.

I mostly agree with this an almost made a PR for it myself the other day. I think Interactive Charts and Altair Internals give a good sense of what those sections are about. However I am not sure if it is intuitive to find faceting under Compound Charts. Yes, it is technically correct, but faceting is so common that I would expect people to be looking for the name directly or something like "Small Multiples". I couldn't think of a better name though; e.g. anything mentioning "Subplots" would not be correct for the layering charts. Maybe "Compound Charts & Facets" just to make it easy to find even if it is a bit redundant? Overall I am probably OK just cutting down the names as you suggested, but if you have any thoughts of improving the "Compound Charts" title, that would be welcome.

[binste]

Good point. I like "Layered and Multi-View Charts" (similar to Composing Layered & Multi-view Plots in the vega-lite docs), combines both the "subplots" and "layering". And I'd associate multi-view with faceting more quickly then with compound.

[joelostblom]

Nice, I like that title too and agree it is easier to associate with faceting. Thank you!