From 7e2c57bc7f550b8a12ec3e17f68e52042d35a00c Mon Sep 17 00:00:00 2001
From: VINEETH ASOK KUMAR <vineeth.asokkumar@clickhouse.com>
Date: Thu, 28 Sep 2023 17:32:49 +0200
Subject: [PATCH] Fix Alignment issue in form elements

---
 src/components/Input/InputWrapper.tsx           |  1 +
 src/components/Select/common/InternalSelect.tsx |  1 +
 src/components/commonElement.tsx                | 15 ++++++++++-----
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/Input/InputWrapper.tsx b/src/components/Input/InputWrapper.tsx
index 533c1f66..ac833d57 100644
--- a/src/components/Input/InputWrapper.tsx
+++ b/src/components/Input/InputWrapper.tsx
@@ -87,6 +87,7 @@ export const InputWrapper = ({
     <FormRoot
       $orientation={orientation}
       $dir={dir}
+      $addLabelPadding
     >
       <FormElementContainer>
         <Wrapper $error={!!error}>{children}</Wrapper>
diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
index 2a410143..31b7c9c9 100644
--- a/src/components/Select/common/InternalSelect.tsx
+++ b/src/components/Select/common/InternalSelect.tsx
@@ -326,6 +326,7 @@ export const InternalSelect = ({
     <FormRoot
       $orientation={orientation}
       $dir={dir}
+      $addLabelPadding
       {...props}
     >
       <FormElementContainer>
diff --git a/src/components/commonElement.tsx b/src/components/commonElement.tsx
index b6e9ae72..3ca2fcf8 100644
--- a/src/components/commonElement.tsx
+++ b/src/components/commonElement.tsx
@@ -4,11 +4,12 @@ import { IconSize } from "./Icon/types";
 export const FormRoot = styled.div<{
   $orientation?: "horizontal" | "vertical";
   $dir?: "start" | "end";
+  $addLabelPadding?: boolean;
 }>`
   display: flex;
   width: 100%;
   gap: ${({ theme }) => theme.click.field.space.gap};
-  ${({ theme, $orientation = "vertical", $dir = "start" }) => `
+  ${({ theme, $orientation = "vertical", $dir = "start", $addLabelPadding = false }) => `
     flex-direction: ${
       $orientation === "horizontal"
         ? $dir === "start"
@@ -19,11 +20,15 @@ export const FormRoot = styled.div<{
         : "column"
     };
     align-items: flex-start;
+    ${
+      $addLabelPadding && $orientation === "horizontal"
+        ? `
     label {
-      padding-top: ${
-        $orientation === "horizontal" ? `calc(${theme.click.field.space.y} + 1px)` : 0
-      };
-      ${$orientation === "horizontal" ? "line-height: 1lh;" : ""}
+      padding-top: calc(${theme.click.field.space.y} + 1px);
+      line-height: 1lh;
+    }
+    `
+        : ""
     }
   `}
   * {