From c3a5ff1eebce87a5ab6e85319b9d46e0aa983d51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 20 May 2022 19:50:30 +0200
Subject: [PATCH] Transforms: Labels to fields, fix label picker layout
 (#49304)

---
 .../transformers/editors/LabelsToFieldsTransformerEditor.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx b/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
index 3cb3a6bdb5f..7a131b5dfcb 100644
--- a/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx
@@ -11,6 +11,7 @@ import {
   LabelsToFieldsMode,
   LabelsToFieldsOptions,
 } from '@grafana/data/src/transformations/transformers/labelsToFields';
+import { Stack } from '@grafana/experimental';
 import { InlineField, InlineFieldRow, RadioButtonGroup, Select, FilterPill } from '@grafana/ui';
 
 const modes: Array<SelectableValue<LabelsToFieldsMode>> = [
@@ -79,7 +80,7 @@ export const LabelsAsFieldsTransformerEditor: React.FC<TransformerUIProps<Labels
       </InlineFieldRow>
       <InlineFieldRow>
         <InlineField label={'Labels'} labelWidth={labelWidth}>
-          <>
+          <Stack gap={1} wrap>
             {labelNames.map((o, i) => {
               const label = o.label!;
               return (
@@ -91,7 +92,7 @@ export const LabelsAsFieldsTransformerEditor: React.FC<TransformerUIProps<Labels
                 />
               );
             })}
-          </>
+          </Stack>
         </InlineField>
       </InlineFieldRow>
       {options.mode !== LabelsToFieldsMode.Rows && (