[G2M] UI/sidebar sizing

[vxsl]

• improve LinkedSelect and PluralLinkedSelect styling to more closely match the given design

  • Value Keys control component now has consistent column sizing, ensured by using CSS grid styling and programmatically setting the component width to that of the the longest possible row which is invisibly rendered.

• widget controls sidebar sizing has been improved in the following aspects:

  • better transition from expanded to collapsed
  • the sidebar will now grow to match the width of the value controls (or any other WidgetControlCard with the grow prop), but will not grow to match the width of any other child. The result is that the sidebar is usually the "perfect size" for the Value Keys section of the controls, but does not jump around changing width when adding keys to a multi-select as discussed in #41.
  • note that the sidebar automatic width mechanism is currently configured to enforce a minimum expanded width of 20rem and a maximum expanded width of 30rem
  • behaviour when an extremely long value key is encountered is currently to overflow the container... Couldn't get truncation to work correctly with all the aforementioned scripting. Will try something better soon

• fixed a bug where overflow scroll was showing in the widget's title bar meta details

[github-actions[bot]]

📚 Storybook preview (updated to d934269d389f0101bc4fb5d926b06768bbc4bcdc)

[sallkall]

@vxsl thanks for select component restyling it, looks good.

For the ql-preview widget I thought we were limiting the number of keys to 3 max? Right now it's letting me add one for each column in the selected dataset. Do we still want to limit this and save further aggregation to the editor? I'm neutral about this just concerned about space. For large datasets we won't be able to fit them all at once in the UI.

The individual delete button looks off, the icon doesn't look centered and the hover bg color is red 😐 . Did I provide a design for this?

[vxsl]

For the ql-preview widget I thought we were limiting the number of keys to 3 max? Right now it's letting me add one for each column in the selected dataset. Do we still want to limit this and save further aggregation to the editor? I'm neutral about this just concerned about space. For large datasets we won't be able to fit them all at once in the UI.

Ah, yes, implemented in #49! :)

The individual delete button looks off, the icon doesn't look centered and the hover bg color is red neutral_face . Did I provide a design for this?

As mentioned in a tiny footnote in this gigantic PR description:

Took a liberty on the value controls deletion buttons as I think these should still exist in some capacity -- can redesign though

So yeah, no design was provided. Looks like the vertical centering issue only occurs in Chrome (I've been developing on Firefox).

If you want to proceed with some version of these deletion buttons, let me know and I can go ahead and fix the centering. But if we're going to scrap it anyway then there's no point in fixing it hehe.

[geoerika]

For scatterplot charts, I am not seeing the select fields for Value Key

[vxsl]

@geoerika thanks for catching both of those. This branch has been amended to address the first error and will add fix for your second comment in #49.