From 954fbb0651afe4c525be40e1c5fd8a626d502d53 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 20 May 2022 14:02:06 -0400
Subject: [PATCH] Transforms: Labels to fields, fix label picker layout
 (#49304) (#49343)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit c3a5ff1eebce87a5ab6e85319b9d46e0aa983d51)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
---
 .../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 a7f164cfe3d..b5ebb92a779 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 && (