From f738c5e087e6764be6da657bdbf82acbe88dbf34 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan.stardust@gmail.com>
Date: Fri, 26 Nov 2021 11:46:08 +0530
Subject: [PATCH] fix: Alignment of point numbers in welcome pages (#9353)

* fix scroll in panel in property pane

* fix table widget button height issue

* fix alignment issues

* hide canvas selection in preview mode

* filter alignment issue fix

* fix app mode issue with iframe widget

* fix 404 alignment issues

* fix generate page alignemnt issues

* fix jsobjects empty container alignment issues

* fix comments width issue

* fix alignment issues
---
 app/client/src/pages/setup/DataCollectionForm.tsx | 4 ++--
 app/client/src/pages/setup/DetailsForm.tsx        | 4 ++--
 app/client/src/pages/setup/NewsletterForm.tsx     | 4 ++--
 app/client/src/pages/setup/common.tsx             | 4 ----
 4 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/app/client/src/pages/setup/DataCollectionForm.tsx b/app/client/src/pages/setup/DataCollectionForm.tsx
index bccda17acb..dc9771e217 100644
--- a/app/client/src/pages/setup/DataCollectionForm.tsx
+++ b/app/client/src/pages/setup/DataCollectionForm.tsx
@@ -38,8 +38,8 @@ export default memo(function DataCollectionForm() {
   const [allowCollection, setAllowCollection] = useState(true);
   return (
     <DataCollectionFormWrapper>
-      <FormHeaderWrapper>
-        <FormHeaderIndex>2.</FormHeaderIndex>
+      <FormHeaderWrapper className="relative flex flex-col items-start">
+        <FormHeaderIndex className="absolute -left-6">2.</FormHeaderIndex>
         <FormHeaderLabel>
           {createMessage(WELCOME_FORM_DATA_COLLECTION_HEADER)}
         </FormHeaderLabel>
diff --git a/app/client/src/pages/setup/DetailsForm.tsx b/app/client/src/pages/setup/DetailsForm.tsx
index 799ae4502f..a701a5a690 100644
--- a/app/client/src/pages/setup/DetailsForm.tsx
+++ b/app/client/src/pages/setup/DetailsForm.tsx
@@ -45,8 +45,8 @@ export default function DetailsForm(
 
   return (
     <DetailsFormWrapper ref={ref}>
-      <FormHeaderWrapper>
-        <FormHeaderIndex>1.</FormHeaderIndex>
+      <FormHeaderWrapper className="relative flex-col items-start">
+        <FormHeaderIndex className="absolute -left-6">1.</FormHeaderIndex>
         <FormHeaderLabel>{createMessage(WELCOME_FORM_HEADER)}</FormHeaderLabel>
       </FormHeaderWrapper>
       <StyledFormBodyWrapper>
diff --git a/app/client/src/pages/setup/NewsletterForm.tsx b/app/client/src/pages/setup/NewsletterForm.tsx
index 113b9baf3c..8626110a4f 100644
--- a/app/client/src/pages/setup/NewsletterForm.tsx
+++ b/app/client/src/pages/setup/NewsletterForm.tsx
@@ -36,8 +36,8 @@ const NewsletterContainer = styled.div`
 export default memo(function NewsletterForm() {
   return (
     <NewsletterContainer>
-      <FormHeaderWrapper>
-        <FormHeaderIndex>3.</FormHeaderIndex>
+      <FormHeaderWrapper className="relative flex-col items-start">
+        <FormHeaderIndex className="absolute -left-6">3.</FormHeaderIndex>
         <FormHeaderLabel>
           {createMessage(WELCOME_FORM_NEWLETTER_HEADER)}
         </FormHeaderLabel>
diff --git a/app/client/src/pages/setup/common.tsx b/app/client/src/pages/setup/common.tsx
index ace96055a8..1e3029d59c 100644
--- a/app/client/src/pages/setup/common.tsx
+++ b/app/client/src/pages/setup/common.tsx
@@ -13,16 +13,12 @@ export const FormHeaderWrapper = styled.div`
 export const FormHeaderLabel = styled.h5`
   width: 100%;
   font-size: 20px;
-  margin: 8px 0 16px;
   font-weight: 500;
 `;
 
 export const FormHeaderIndex = styled.h5`
   font-size: 20px;
   font-weight: 500;
-  position: absolute;
-  left: -33px;
-  top: -33px;
 `;
 
 export const FormBodyWrapper = styled.div`