Simplify section styling

packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx

@@ -4,7 +4,7 @@ import { SegmentInput, Icon, SegmentSection } from '@grafana/ui';
 
 const SegmentFrame = ({ children }: any) => (
   <>
-    <SegmentSection label="Section Name">{children}</SegmentSection>
+    <SegmentSection label="Segment Name">{children}</SegmentSection>
   </>
 );
 

packages/grafana-ui/src/components/Segment/SegmentSection.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
 import { SegmentSectionFill } from './SegmentSectionFill';
 import { SegmentSectionLabel } from './SegmentSectionLabel';
+import { useStyles2 } from '../../themes';
 
 /**
  * Horizontal section for editor components.
@@ -18,12 +21,26 @@ export const SegmentSection = ({
   children: React.ReactNode;
   // Fill the space at the end
   fill?: boolean;
-}) => (
-  <div className="gf-form-inline">
-    <div className="gf-form">
-      <SegmentSectionLabel name={label} className="width-7" />
-      {children}
-    </div>
-    {fill && <SegmentSectionFill />}
-  </div>
-);
+}) => {
+  const styles = useStyles2(getStyles);
+  return (
+    <>
+      <div className={styles.container}>
+        <div>
+          <SegmentSectionLabel name={label} className="width-7" />
+        </div>
+        {children}
+        {fill && <SegmentSectionFill />}
+      </div>
+    </>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css`
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: ${theme.spacing(0.5)};
+    align-content: flex-start;
+  `,
+});

public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx

@@ -82,6 +82,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     borderRadius: theme.shape.borderRadius(),
     marginRight: theme.spacing(0.5),
     padding: `0 ${theme.spacing(1)}`,
+    height: `${theme.v1.spacing.formInputHeight}px`,
   }),
   error: css`
     border: 1px solid ${theme.colors.error.main};

public/app/plugins/datasource/graphite/components/MetricsSection.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import { GraphiteSegment } from '../types';
 import { GraphiteQueryEditorState } from '../state/store';
 import { MetricSegment } from './MetricSegment';
-import { css } from '@emotion/css';
-import { useStyles2 } from '@grafana/ui';
 
 type Props = {
   segments: GraphiteSegment[];
@@ -11,22 +9,11 @@ type Props = {
 };
 
 export function MetricsSection({ segments = [], state }: Props) {
-  const styles = useStyles2(getStyles);
-
   return (
-    <div className={styles.container}>
+    <>
       {segments.map((segment, index) => {
         return <MetricSegment segment={segment} metricIndex={index} key={index} state={state} />;
       })}
-    </div>
+    </>
   );
 }
-
-function getStyles() {
-  return {
-    container: css`
-      display: flex;
-      flex-direction: row;
-    `,
-  };
-}

public/app/plugins/datasource/graphite/components/TagsSection.tsx

@@ -44,7 +44,7 @@ export function TagsSection({ tags, state, addTagSegments }: Props) {
   ]);
 
   return (
-    <div className={styles.container}>
+    <>
       {tags.map((tag, index) => {
         return <TagEditor key={index} tagIndex={index} tag={tag} state={state} />;
       })}
@@ -60,16 +60,12 @@ export function TagsSection({ tags, state, addTagSegments }: Props) {
         />
       )}
       {state.paused && <PlayButton />}
-    </div>
+    </>
   );
 }
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    container: css`
-      display: flex;
-      flex-direction: row;
-    `,
     button: css`
       margin-right: ${theme.spacing(0.5)};
     `,