From da63cd61ce9cfe51a003e65b6ba28b5c67e0fe96 Mon Sep 17 00:00:00 2001
From: Kyle Wong <37189875+kyle-a-wong@users.noreply.github.com>
Date: Wed, 14 Aug 2024 14:21:57 -0400
Subject: [PATCH] ui: Fix columnsSelector CSS safari issue

The columnsSelector component was not rendering
as expected in the Safari browesr, 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.

Fixes: #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
---
 .../cluster-ui/src/columnsSelector/columnsSelector.tsx           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/columnsSelector/columnsSelector.tsx b/pkg/ui/workspaces/cluster-ui/src/columnsSelector/columnsSelector.tsx
index f880fcfb5ae8..d6216dc63e40 100644
--- a/pkg/ui/workspaces/cluster-ui/src/columnsSelector/columnsSelector.tsx
+++ b/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,