From 76f77f86c56c7a46f05df184c9b118938c0675c3 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Mon, 1 Feb 2021 16:47:41 +0100
Subject: [PATCH] Add width for Variable Editors (#30791)

---
 .../features/variables/query/QueryVariableEditor.tsx   | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/public/app/features/variables/query/QueryVariableEditor.tsx b/public/app/features/variables/query/QueryVariableEditor.tsx
index 6d1f2220b75..739175be96a 100644
--- a/public/app/features/variables/query/QueryVariableEditor.tsx
+++ b/public/app/features/variables/query/QueryVariableEditor.tsx
@@ -1,4 +1,5 @@
 import React, { ChangeEvent, PureComponent } from 'react';
+import { css } from 'emotion';
 import { MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { InlineField, InlineFieldRow, VerticalGroup } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
@@ -197,7 +198,14 @@ export class QueryVariableEditorUnConnected extends PureComponent<Props, State>
               </InlineField>
               <QueryVariableRefreshSelect onChange={this.onRefreshChange} refresh={this.props.variable.refresh} />
             </InlineFieldRow>
-            <div style={{ flexDirection: 'column' }}>{this.renderQueryEditor()}</div>
+            <div
+              className={css`
+                flex-direction: column;
+                width: 100%;
+              `}
+            >
+              {this.renderQueryEditor()}
+            </div>
             <VariableTextField
               value={this.state.regex ?? this.props.variable.regex}
               name="Regex"