From de255889569f5b06eb24bd94f5b9059f6ad978b7 Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Thu, 31 Aug 2023 15:15:27 +0200
Subject: [PATCH] Transformations: Fix group by field transformation field name
 text-overflow (#74173)

Transformations: Grow field name label
---
 .../transformers/editors/GroupByTransformerEditor.tsx      | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/public/app/features/transformers/editors/GroupByTransformerEditor.tsx b/public/app/features/transformers/editors/GroupByTransformerEditor.tsx
index c2e80529653..41dac28ea97 100644
--- a/public/app/features/transformers/editors/GroupByTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/GroupByTransformerEditor.tsx
@@ -83,7 +83,7 @@ export const GroupByFieldConfiguration = ({ fieldName, config, onConfigChange }:
   );
 
   return (
-    <InlineField label={fieldName} labelWidth={32} grow shrink>
+    <InlineField className={styles.label} label={fieldName} grow shrink>
       <Stack gap={0.5} direction="row" wrap={false}>
         <div className={styles.operation}>
           <Select options={options} value={config?.operation} placeholder="Ignored" onChange={onChange} isClearable />
@@ -107,6 +107,11 @@ export const GroupByFieldConfiguration = ({ fieldName, config, onConfigChange }:
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
+    label: css`
+      label {
+        min-width: ${theme.spacing(32)};
+      }
+    `,
     operation: css`
       flex-shrink: 0;
       height: 100%;