diff --git a/ui/src/variables/components/VariableDropdown.scss b/ui/src/variables/components/VariableDropdown.scss
index 2aca0e8dc5..4de6318c99 100644
--- 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
index 7abcdbfb2f..71dbdae761 100644
--- 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>