From 4fc57f13ab39fb88422d8bb02196f8cd5d104fdf Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 1 Feb 2021 10:12:08 -0600
Subject: [PATCH] Add width for Variable Editors (#30791) (#30795)

(cherry picked from commit 76f77f86c56c7a46f05df184c9b118938c0675c3)

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
---
 .../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"