Graphite: Fix overflow of functions editor (#108524)

* Expose setting labelStyles for the Segment components

* Ensure container fills height of text

* Update label styles

* Use classNames instead

* Review

* Lint

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

@@ -22,6 +22,8 @@ const getStyles = (theme: GrafanaTheme2) => {
       fontSize: theme.typography.bodySmall.fontSize,
       cursor: 'pointer',
       display: 'inline-block',
+      overflowWrap: 'anywhere',
+      height: '100%',
     }),
   };
 };

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

@@ -55,7 +55,13 @@ export function FunctionParamEditor({ editableParam, onChange, onExpandedChange,
         }}
         onExpandedChange={onExpandedChange}
         // input style
-        style={{ height: '25px', paddingTop: '2px', marginTop: '2px', paddingLeft: '4px', minWidth: '100px' }}
+        style={{
+          height: '25px',
+          paddingTop: '2px',
+          marginTop: '2px',
+          paddingLeft: '4px',
+          minWidth: '100px',
+        }}
       ></SegmentInput>
     );
   }
@@ -65,6 +71,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
   segment: css({
     margin: 0,
     padding: 0,
+    overflowWrap: 'anywhere',
+    height: '100%',
   }),
   input: css({
     margin: 0,
@@ -72,5 +80,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     input: {
       height: '25px',
     },
+    overflowWrap: 'anywhere',
+    height: '100%',
   }),
 });

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

@@ -41,6 +41,8 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) {
       onFocus={() => setIsMouseOver(true)}
       onMouseOver={() => setIsMouseOver(true)}
       onMouseOut={() => setIsMouseOver(false)}
+      // We set this to ensure if any long text wraps the container expands with it
+      style={{ height: '100%' }}
     >
       <Stack gap={0} alignItems={'baseline'}>
         <FunctionEditor