diff --git a/ui/src/data_explorer/components/RawQueryEditor.js b/ui/src/data_explorer/components/RawQueryEditor.js index 0cd6394ba..e135bb25d 100644 --- a/ui/src/data_explorer/components/RawQueryEditor.js +++ b/ui/src/data_explorer/components/RawQueryEditor.js @@ -1,4 +1,5 @@ import React, {PropTypes} from 'react' +import classNames from 'classnames' const ENTER = 13 const ESCAPE = 27 @@ -57,7 +58,9 @@ const RawQueryEditor = React.createClass({ onBlur={this.handleUpdate} ref={(editor) => this.editor = editor} value={value} - placeholder="Blank query" + placeholder="Enter a query..." + autoComplete="off" + spellCheck="false" /> {this.renderStatus(rawStatus)} @@ -69,7 +72,12 @@ const RawQueryEditor = React.createClass({ return null } - return
{rawStatus.error || rawStatus.warn || rawStatus.success}
+ return ( +
+ + {rawStatus.error || rawStatus.warn || rawStatus.success} +
+ ) }, }) diff --git a/ui/src/style/pages/data-explorer/query-builder.scss b/ui/src/style/pages/data-explorer/query-builder.scss index 3cefa1498..98bdad1d6 100644 --- a/ui/src/style/pages/data-explorer/query-builder.scss +++ b/ui/src/style/pages/data-explorer/query-builder.scss @@ -165,7 +165,8 @@ $query-builder--column-heading-height: 50px; position: relative; pre { - display: block; + display: flex; + align-items: center; padding: 7px; border: 2px solid $query-editor-tab-inactive; background-color: $query-editor-tab-inactive;