From 8c5c9db82b8fdb115a733ae72300d7f1e14c4c8b Mon Sep 17 00:00:00 2001
From: Catalin <20538711+devcatalin@users.noreply.github.com>
Date: Fri, 21 Jan 2022 19:22:44 +0200
Subject: [PATCH 1/2] fix: section header left padding

---
 src/components/molecules/SectionRenderer/SectionHeader.tsx | 6 +++++-
 src/components/molecules/SectionRenderer/styled.tsx        | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/SectionRenderer/SectionHeader.tsx b/src/components/molecules/SectionRenderer/SectionHeader.tsx
index 124152529d..ddb4d957cd 100644
--- a/src/components/molecules/SectionRenderer/SectionHeader.tsx
+++ b/src/components/molecules/SectionRenderer/SectionHeader.tsx
@@ -82,7 +82,11 @@ function SectionHeader(props: SectionHeaderProps) {
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <S.NameContainer isHovered={isHovered} $hasCustomNameDisplay={Boolean(NameDisplay.Component)}>
+      <S.NameContainer
+        isHovered={isHovered}
+        isCheckable={Boolean(sectionBlueprint.builder?.makeCheckable)}
+        $hasCustomNameDisplay={Boolean(NameDisplay.Component)}
+      >
         {sectionInstance.checkable &&
           sectionInstance.isInitialized &&
           (sectionBlueprint.customization?.isCheckVisibleOnHover
diff --git a/src/components/molecules/SectionRenderer/styled.tsx b/src/components/molecules/SectionRenderer/styled.tsx
index 76368606c1..5cf2d731a5 100644
--- a/src/components/molecules/SectionRenderer/styled.tsx
+++ b/src/components/molecules/SectionRenderer/styled.tsx
@@ -6,6 +6,7 @@ import Colors, {FontColors} from '@styles/Colors';
 
 type NameContainerProps = {
   isHovered?: boolean;
+  isCheckable?: boolean;
   $hasCustomNameDisplay: boolean;
 };
 
@@ -27,7 +28,7 @@ export const NameContainer = styled.span<NameContainerProps>`
   display: flex;
   align-items: center;
   width: 100%;
-  padding-left: 24px;
+  ${props => props.isCheckable && `padding-left: 24px;`}
   ${props => !props.isHovered && 'padding-right: 30px;'}
   ${props => props.$hasCustomNameDisplay && 'padding: 0;'}
 `;

From 0b9b190e8be56dcd16c387965725802dd197ef32 Mon Sep 17 00:00:00 2001
From: Catalin <20538711+devcatalin@users.noreply.github.com>
Date: Fri, 21 Jan 2022 19:24:39 +0200
Subject: [PATCH 2/2] fix: quick preview left padding

---
 src/components/molecules/QuickActionPreview/styled.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/molecules/QuickActionPreview/styled.tsx b/src/components/molecules/QuickActionPreview/styled.tsx
index 29fdbcc1cd..823ce60ebf 100644
--- a/src/components/molecules/QuickActionPreview/styled.tsx
+++ b/src/components/molecules/QuickActionPreview/styled.tsx
@@ -13,6 +13,7 @@ export const PreviewSpan = styled.span<{isItemSelected: boolean}>`
   font-size: 12px;
   cursor: pointer;
   color: ${props => (props.isItemSelected ? Colors.blackPure : Colors.blue6)};
+  margin-left: 5px;
   margin-right: 15px;
 `;