Merge cockroachdb#128996

128996: ui: Fix columnsSelector CSS safari issue r=kyle-a-wong a=kyle-a-wong

The columnsSelector component was not rendering as expected in the Safari browser, making it look as if the dropdown was empty. It was actually below the "Apply" button and required scrolling to see.

This was an issue due to how react-select implements its dropdown, some custom css, and differences in how chrome and safari handle said css.

react-select applies css of `top:100%` and `position: absolute` to make the menu render below the input box in its parent container. This container's height is determined by said input box.  In ColumnsSelector, no input box is displayed, and the menu is given a `position: relative` to make the menu appear before the `Apply` button.

The bug in question comes because the container is given the property `height: fit-content`. which seems to be handled differently in chrome and safari. It seems like chrome treats fit-content similar to `auto` and thus the height isn't taken
into account when calculating top: 100%. This is different from Safari, which appears to be taking into account the rendered menu as part of its height, resulting in the menu being shifted down by 100% of its own height.

To fix, `fit-content` is removed from the container class.

Fixes: cockroachdb#121268
Release note (bug fix): fixes bug in safari where certain dropdowns in db-console appeared to be empty
with no options to select from

Co-authored-by: Kyle Wong <[email protected]>

pkg/ui/workspaces/cluster-ui/src/columnsSelector/columnsSelector.tsx

@@ -69,7 +69,6 @@ const customStyles = {
   container: (provided: any) => ({
     ...provided,
     border: "none",
-    height: "fit-content",
   }),
   control: (provided: any) => ({
     ...provided,