From 18f8f2324abc340c723bcead944b6d70371c5074 Mon Sep 17 00:00:00 2001
From: Nick Richmond <5732000+NWRichmond@users.noreply.github.com>
Date: Mon, 13 May 2024 12:51:32 -0400
Subject: [PATCH] Graphite: Fix alignment of elements in the query editor
 (#87662)

style: ensure elements in query builder rows are aligned
---
 .../graphite/components/AddGraphiteFunction.tsx  | 16 ++++++++++------
 .../graphite/components/MetricsSection.tsx       |  4 ++--
 .../graphite/components/TagsSection.tsx          |  4 ++--
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx b/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx
index 1689697b554..406d130e946 100644
--- a/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx
+++ b/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx
@@ -35,12 +35,16 @@ export function AddGraphiteFunction({ funcDefs }: Props) {
   }, [value, dispatch]);
 
   return (
-    <Segment
-      Component={<Button icon="plus" variant="secondary" className={cx(styles.button)} aria-label="Add new function" />}
-      options={options}
-      onChange={setValue}
-      inputMinWidth={150}
-    />
+    <div>
+      <Segment
+        Component={
+          <Button icon="plus" variant="secondary" className={cx(styles.button)} aria-label="Add new function" />
+        }
+        options={options}
+        onChange={setValue}
+        inputMinWidth={150}
+      />
+    </div>
   );
 }
 
diff --git a/public/app/plugins/datasource/graphite/components/MetricsSection.tsx b/public/app/plugins/datasource/graphite/components/MetricsSection.tsx
index 28887f26a25..b4075036cdf 100644
--- a/public/app/plugins/datasource/graphite/components/MetricsSection.tsx
+++ b/public/app/plugins/datasource/graphite/components/MetricsSection.tsx
@@ -12,10 +12,10 @@ type Props = {
 
 export function MetricsSection({ segments = [], state }: Props) {
   return (
-    <>
+    <div>
       {segments.map((segment, index) => {
         return <MetricSegment segment={segment} metricIndex={index} key={index} state={state} />;
       })}
-    </>
+    </div>
   );
 }
diff --git a/public/app/plugins/datasource/graphite/components/TagsSection.tsx b/public/app/plugins/datasource/graphite/components/TagsSection.tsx
index 6c29e212257..3e1160b07e5 100644
--- a/public/app/plugins/datasource/graphite/components/TagsSection.tsx
+++ b/public/app/plugins/datasource/graphite/components/TagsSection.tsx
@@ -44,7 +44,7 @@ export function TagsSection({ tags, state }: Props) {
   );
 
   return (
-    <>
+    <div>
       {tags.map((tag, index) => {
         return <TagEditor key={index} tagIndex={index} tag={tag} state={state} />;
       })}
@@ -60,7 +60,7 @@ export function TagsSection({ tags, state }: Props) {
         />
       )}
       {state.paused && <PlayButton />}
-    </>
+    </div>
   );
 }