Fix responsive option labels in dropdown

Author: KoolADE85

components/dash-core-components/src/components/Dropdown.tsx

@@ -30,8 +30,7 @@ export default function Dropdown({
     multi = false,
     searchable = true,
     localizations = defaultLocalizations,
-    // eslint-disable-next-line no-magic-numbers
-    optionHeight = 36,
+    optionHeight = 'auto',
     // eslint-disable-next-line no-magic-numbers
     maxHeight = 200,
     closeOnSelect = !multi,

components/dash-core-components/src/components/css/dropdown.css

@@ -61,8 +61,9 @@
 
 .dash-dropdown-content {
     background: var(--Dash-Fill-Inverse-Strong);
-    min-width: fit-content;
-    width: var(--radix-popover-trigger-width);
+    width: fit-content;
+    min-width: var(--radix-popover-trigger-width);
+    max-width: 100vw;
     overflow-y: auto;
     z-index: 50;
     box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
@@ -190,7 +191,7 @@
 }
 
 .dash-dropdown-option {
-    padding: var(--Dash-Spacing) calc(var(--Dash-Spacing) * 3);
+    padding: calc(var(--Dash-Spacing) * 2) calc(var(--Dash-Spacing) * 3);
     background: var(--Dash-Fill-Inverse-strong);
     box-shadow: 0 -1px 0 0 var(--Dash-Fill-Disabled) inset;
     color: var(--Dash-Text-Strong);
@@ -212,10 +213,6 @@
     cursor: not-allowed;
 }
 
-.dash-dropdown-option-text {
-    white-space: pre;
-}
-
 .dash-dropdown-option-checkbox {
     display: inline-block;
     margin: 0 calc(var(--Dash-Spacing) * 2) 0 0;

components/dash-core-components/src/types.ts

@@ -443,7 +443,7 @@ export interface DropdownProps {
     /**
      * height of each option. Can be increased when label lengths would wrap around
      */
-    optionHeight?: number;
+    optionHeight?: 'auto' | number;
 
     /**
      * height of the options dropdown.