Skip to content

Commit

Permalink
ui: Fix columnsSelector CSS safari issue
Browse files Browse the repository at this point in the history
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: 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
  • Loading branch information
kyle-a-wong committed Aug 14, 2024
1 parent ac2d86d commit da63cd6
Showing 1 changed file with 0 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ const customStyles = {
container: (provided: any) => ({
...provided,
border: "none",
height: "fit-content",
}),
control: (provided: any) => ({
...provided,
Expand Down

0 comments on commit da63cd6

Please sign in to comment.