diff --git a/web/ui/react-app/src/App.css b/web/ui/react-app/src/App.css index 536d959a8d..d8c7f1b9cf 100644 --- a/web/ui/react-app/src/App.css +++ b/web/ui/react-app/src/App.css @@ -62,20 +62,21 @@ button.execute-btn { .autosuggest-dropdown { position: absolute; border: 1px solid #ced4da; - border-radius: .25rem; background-color: #fff; color: #495057; font-size: 1rem; z-index: 1000; - min-width: 10rem; - top: 100%; left: 56px; - float: left; - margin: -5px; + margin-top: -6px; +} + +.autosuggest-dropdown-list { + padding: 0; + margin: 0; list-style: none; } -.autosuggest-dropdown li { +.autosuggest-dropdown-list li { width: 100%; padding: .25rem 1.5rem; clear: both; @@ -85,12 +86,12 @@ button.execute-btn { display: block; } -.autosuggest-dropdown .card-header { - background: rgba(240, 230, 140, 0.4); - height: 30px; - display: flex; - align-items: center; +.autosuggest-dropdown-list li.autosuggest-dropdown-header { + background-color: #bfdeff; + font-size: 10px; + line-height: 1.5; text-transform: uppercase; + text-align: center; } .graph-controls, .table-controls { diff --git a/web/ui/react-app/src/ExpressionInput.test.tsx b/web/ui/react-app/src/ExpressionInput.test.tsx index 9c985c7670..12b1422890 100644 --- a/web/ui/react-app/src/ExpressionInput.test.tsx +++ b/web/ui/react-app/src/ExpressionInput.test.tsx @@ -127,7 +127,7 @@ describe('ExpressionInput', () => { const downshift = expressionInput.find(Downshift); downshift.setState({ isOpen: true }); const ul = downshift.find('ul'); - expect(ul.prop('className')).toEqual('card list-group'); + expect(ul.prop('className')).toEqual('autosuggest-dropdown-list'); const items = ul.find(SanitizeHTML); expect(items.map(item => item.text()).join(', ')).toEqual( 'node_cpu_guest_seconds_total, node_cpu_seconds_total, instance:node_cpu_utilisation:rate1m' diff --git a/web/ui/react-app/src/ExpressionInput.tsx b/web/ui/react-app/src/ExpressionInput.tsx index 9487d14c81..e3b0cf5a9b 100644 --- a/web/ui/react-app/src/ExpressionInput.tsx +++ b/web/ui/react-app/src/ExpressionInput.tsx @@ -1,15 +1,5 @@ import React, { Component } from 'react'; -import { - Button, - InputGroup, - InputGroupAddon, - InputGroupText, - Input, - ListGroup, - ListGroupItem, - Card, - CardHeader, -} from 'reactstrap'; +import { Button, InputGroup, InputGroupAddon, InputGroupText, Input } from 'reactstrap'; import Downshift, { ControllerStateAndHelpers } from 'downshift'; import fuzzy from 'fuzzy'; @@ -93,8 +83,8 @@ class ExpressionInput extends Component - {title} + , ]; }, [] as JSX.Element[]