fix(ui/tickscript): make db names visible

ui/src/kapacitor/components/TickscriptEditorControls.tsx

@@ -32,6 +32,7 @@ class TickscriptEditorControls extends Component<Props> {
           <MultiSelectDBDropdown
             selectedItems={this.addName(task.dbrps)}
             onApply={onSelectDbrps}
+            rightAligned={true}
           />
         </div>
       </div>

ui/src/shared/components/MultiSelectDBDropdown.js

@@ -21,7 +21,7 @@ class MultiSelectDBDropdown extends Component {
 
   render() {
     const {dbrps} = this.state
-    const {onApply, selectedItems} = this.props
+    const {onApply, selectedItems, rightAligned} = this.props
     const label = 'Select databases'
 
     return (
@@ -31,6 +31,7 @@ class MultiSelectDBDropdown extends Component {
         onApply={onApply}
         isApplyShown={false}
         selectedItems={selectedItems}
+        rightAligned={rightAligned}
       />
     )
   }

ui/src/shared/components/MultiSelectDropdown.js

@@ -109,10 +109,14 @@ class MultiSelectDropdown extends Component {
   }
 
   renderMenu() {
-    const {items, isApplyShown} = this.props
+    const {items, isApplyShown, rightAligned} = this.props
 
     return (
-      <ul className="dropdown-menu">
+      <ul
+        className={classnames('dropdown-menu', {
+          'dropdown--right': rightAligned,
+        })}
+      >
         {isApplyShown && (
           <li className="multi-select--apply">
             <button className="btn btn-xs btn-info" onClick={this.handleApply}>

ui/src/style/theme/_dropdowns.scss

@@ -189,6 +189,9 @@ $dropdown-purple-header: $c-potassium;
   display: none;
   position: absolute;
   top: 100%;
+  &.dropdown--right {
+    right: 0px
+  }
 }
 .dropdown.open {
   z-index: 9999;