From b91260ae63f3a94be69bc807ab78253e88200889 Mon Sep 17 00:00:00 2001
From: Bartosz Leper <bartosz.leper@goteleport.com>
Date: Mon, 27 Jan 2025 18:40:13 +0100
Subject: [PATCH] Revert "review"

This reverts commit ffe0554b75f35693f99934007e5a6cf9d65d99b1.
---
 .../components/LabelsInput/LabelsInput.tsx    | 77 ++++++++-----------
 1 file changed, 33 insertions(+), 44 deletions(-)

diff --git a/web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx b/web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx
index 9991a7d374100..ca6487fa95b2f 100644
--- a/web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx
+++ b/web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx
@@ -146,46 +146,42 @@ export function LabelsInput({
   const width = `${inputWidth}px`;
   const inputSize = 'medium';
   return (
-    <Fieldset gap={labels.length > 0 ? 2 : 1}>
-      <Stack gap={1}>
-        {legend && (
-          <Legend>
-            {tooltipContent ? (
-              <>
-                <span
-                  css={{
-                    marginRight: '4px',
-                    verticalAlign: 'middle',
-                  }}
-                >
-                  {legend}
-                </span>
-                <IconTooltip children={tooltipContent} />
-              </>
-            ) : (
-              legend
-            )}
-          </Legend>
-        )}
-        {labels.length > 0 && (
-          <Flex>
-            <Box width={width} mr="3">
-              <Text typography="body3">
-                {labelKey.fieldName} (required field)
-              </Text>
-            </Box>
+    <Fieldset>
+      {legend && (
+        <Legend>
+          {tooltipContent ? (
+            <>
+              <span
+                css={{
+                  marginRight: '4px',
+                  verticalAlign: 'middle',
+                }}
+              >
+                {legend}
+              </span>
+              <IconTooltip children={tooltipContent} />
+            </>
+          ) : (
+            legend
+          )}
+        </Legend>
+      )}
+      {labels.length > 0 && (
+        <Flex mt={legend ? 1 : 0} mb={1}>
+          <Box width={width} mr="3">
             <Text typography="body3">
-              {labelVal.fieldName} (required field)
+              {labelKey.fieldName} (required field)
             </Text>
-          </Flex>
-        )}
-      </Stack>
-      <Stack gap={2}>
+          </Box>
+          <Text typography="body3">{labelVal.fieldName} (required field)</Text>
+        </Flex>
+      )}
+      <Box>
         {labels.map((label, index) => {
           const validationItem: LabelValidationResult | undefined =
             validationResult.results?.[index];
           return (
-            <Box key={index}>
+            <Box mb={2} key={index}>
               <Flex alignItems="start">
                 <FieldInput
                   size={inputSize}
@@ -245,7 +241,7 @@ export function LabelsInput({
             </Box>
           );
         })}
-      </Stack>
+      </Box>
       <ButtonSecondary
         onClick={e => {
           e.preventDefault();
@@ -274,21 +270,14 @@ export const nonEmptyLabels: LabelsRule = labels => () => {
   };
 };
 
-const Stack = styled(Flex).attrs({
-  flexDirection: 'column',
-  alignItems: 'start',
-})``;
-
-const Fieldset = styled(Stack).attrs({
-  as: 'fieldset',
-})`
+const Fieldset = styled.fieldset`
   border: none;
   margin: 0;
   padding: 0;
 `;
 
 const Legend = styled.legend`
-  margin: 0;
+  margin: 0 0 ${props => props.theme.space[1]}px 0;
   padding: 0;
   ${props => props.theme.typography.body3}
 `;