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}