From 117adbbe5d4b37eafa2d60a9680d5b9e6ca07668 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Sun, 9 Dec 2018 14:39:25 -0800
Subject: [PATCH] Fix search field styles

---
 .../plugins/datasource/loki/components/LokiQueryField.tsx  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
index b63cdc3cece..f5d42a2e8cf 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
@@ -16,6 +16,11 @@ import { parseQuery, formatQuery } from '../query_utils';
 
 const PRISM_SYNTAX = 'promql';
 
+const SEARCH_FIELD_STYLES = {
+  width: '66%',
+  marginLeft: 3,
+};
+
 export function willApplySuggestion(suggestion: string, { typeaheadContext, typeaheadText }: QueryFieldState): string {
   // Modify suggestion based on context
   switch (typeaheadContext) {
@@ -256,7 +261,7 @@ class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, LokiQueryF
             </div>
           ) : null}
         </div>
-        <div className="prom-query-field-wrapper">
+        <div className="prom-query-field-wrapper" style={SEARCH_FIELD_STYLES}>
           <QueryField
             additionalPlugins={this.pluginsSearch}
             disabled={searchDisabled}