Graphite: Fix alignment of elements in the query editor (#87662)

style: ensure elements in query builder rows are aligned

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>
   );
 }
 

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>
   );
 }

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>
   );
 }