From d2a1b8fd951202d5f63b923caf164c0aa14ab4f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Tue, 11 May 2021 11:43:36 +0200
Subject: [PATCH] TagsInput: Fix layout issue with tags input (#33907)

---
 .../src/components/TagsInput/TagsInput.tsx    | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
index 46c0d7b7576..70a2727a79d 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
@@ -47,27 +47,28 @@ export const TagsInput: FC<Props> = ({ placeholder = 'New tag (enter key to add)
           return <TagItem key={`${tag}-${index}`} name={tag} onRemove={onRemove} />;
         })}
       </div>
-
-      <Input
-        placeholder={placeholder}
-        onChange={onNameChange}
-        value={newTagName}
-        onKeyUp={onKeyboardAdd}
-        suffix={
-          newTagName.length > 0 && (
-            <Button fill="text" className={styles.addButtonStyle} onClick={onAdd} size="md">
-              Add
-            </Button>
-          )
-        }
-      />
+      <div>
+        <Input
+          placeholder={placeholder}
+          onChange={onNameChange}
+          value={newTagName}
+          onKeyUp={onKeyboardAdd}
+          suffix={
+            newTagName.length > 0 && (
+              <Button fill="text" className={styles.addButtonStyle} onClick={onAdd} size="md">
+                Add
+              </Button>
+            )
+          }
+        />
+      </div>
     </div>
   );
 };
 
 const getStyles = (theme: GrafanaTheme) => ({
   wrapper: css`
-    height: ${theme.spacing.formInputHeight}px;
+    min-height: ${theme.spacing.formInputHeight}px;
     align-items: center;
     display: flex;
     flex-wrap: wrap;