From a7b853deec60773725b7a24cbb59264d33fd9de8 Mon Sep 17 00:00:00 2001
From: Nick Richmond <nick.richmond@grafana.com>
Date: Fri, 10 May 2024 14:17:40 -0400
Subject: [PATCH] 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 1689697b5544b..406d130e9467d 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 28887f26a25e1..b4075036cdf3c 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 6c29e2122577b..3e1160b07e587 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>
   );
 }