fix: Adjusting the width of dropdown (#18059)

* fix: Adjusting the width of dropdown This will make it so the width of the dropdown will adjust to the longest variable name * fix: Adjusting the width of dropdown Updating font * fix: Adjusting the width of dropdown fix prettier
influxdata · May 14, 2020 · 17f4cc1 · 17f4cc1
1 parent 97037f8
commit 17f4cc1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/ui/src/variables/components/VariableDropdown.scss b/ui/src/variables/components/VariableDropdown.scss
@@ -93,3 +93,7 @@
     cursor: grab !important;
   }
 }
+
+.variable-dropdown--item {
+  font-family: $cf-code-font;
+}
diff --git a/ui/src/variables/components/VariableDropdown.tsx b/ui/src/variables/components/VariableDropdown.tsx
@@ -43,6 +43,14 @@ class VariableDropdown extends PureComponent<Props> {
     const dropdownStatus =
       values.length === 0 ? ComponentStatus.Disabled : ComponentStatus.Default
 
+    const longestItemWidth = Math.floor(
+      values.reduce(function(a, b) {
+        return a.length > b.length ? a : b
+      }, '').length * 8.5
+    )
+
+    const widthLength = Math.max(140, longestItemWidth)
+
     return (
       <div className="variable-dropdown">
         {/* TODO: Add variable description to title attribute when it is ready */}
@@ -62,6 +70,7 @@ class VariableDropdown extends PureComponent<Props> {
           )}
           menu={onCollapse => (
             <Dropdown.Menu
+              style={{width: `${widthLength}px`}}
               onCollapse={onCollapse}
               theme={DropdownMenuTheme.Amethyst}
             >
@@ -74,6 +83,7 @@ class VariableDropdown extends PureComponent<Props> {
                     onClick={this.handleSelect}
                     selected={val === selectedValue}
                     testID="variable-dropdown--item"
+                    className="variable-dropdown--item"
                   >
                     {val}
                   </Dropdown.Item>