Style dropdown to be width of input fields

ui/src/sources/components/KapacitorDropdown.tsx

@@ -7,6 +7,8 @@ import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 import Button from 'src/reusable_ui/components/Button'
 import {ToggleVisibility} from 'src/types/wizard'
 
+import classnames from 'classnames'
+
 import {
   ComponentColor,
   ComponentSize,
@@ -39,7 +41,7 @@ class KapacitorDropdown extends PureComponent<Props & WithRouterProps> {
   }
 
   public render() {
-    const {buttonSize} = this.props
+    const {buttonSize, setActiveKapacitor, onAddNew} = this.props
 
     if (this.isKapacitorsEmpty) {
       return (
@@ -62,7 +64,10 @@ class KapacitorDropdown extends PureComponent<Props & WithRouterProps> {
         replaceWithIfNotAuthorized={this.UnauthorizedDropdown}
       >
         <Dropdown
-          className="dropdown-260"
+          className={classnames({
+            'kapacitor-dropdown': onAddNew,
+            'dropdown-260': !onAddNew,
+          })}
           buttonColor="btn-primary"
           buttonSize={buttonSize}
           items={this.kapacitorItems}

ui/src/sources/components/KapacitorStep.scss

@@ -0,0 +1,11 @@
+.kapacitor-step--dropdown {
+  padding: 0;
+}
+
+.kapacitor-dropdown {
+  min-width: 100%;
+  .dropdown,
+  .dropdown-toggle {
+    min-width: 100%;
+  }
+}

ui/src/sources/components/KapacitorStep.tsx

@@ -193,7 +193,8 @@ class KapacitorStep extends PureComponent<Props, State> {
       const storeSource = sources.filter(s => s.id === source.id)[0]
 
       return (
-        <div className="form-group col-xs-12 wizard-input">
+        <div className="kapacitor-step--dropdown col-xs-12">
+          <div className="form-group col-xs-6">
             <KapacitorDropdown
               suppressEdit={true}
               source={storeSource}
@@ -205,6 +206,7 @@ class KapacitorStep extends PureComponent<Props, State> {
               displayValue={!exists && newKapacitor.name}
             />
           </div>
+        </div>
       )
     }
     return

ui/src/style/chronograf.scss

@@ -76,6 +76,7 @@
 @import 'components/histogram-chart';
 @import 'components/import-dashboard-mappings';
 @import 'src/sources/components/ConnectionLink';
+@import 'src/sources/components/KapacitorStep';
 
 
 // Reusable UI Components