From bed6605bd77040245847058a781456381bb62a16 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 18 Apr 2023 16:41:30 +0300
Subject: [PATCH 1/3] fix: fix n8n-checkbox alignment

---
 packages/design-system/src/components/N8nCheckbox/Checkbox.vue | 2 ++
 .../design-system/src/components/N8nInputLabel/InputLabel.vue  | 1 +
 packages/design-system/src/css/checkbox.scss                   | 3 ++-
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
index d5ef7cc270170..28b704ecceeab 100644
--- a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
+++ b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
@@ -76,6 +76,7 @@ export default defineComponent({
 .n8nCheckbox {
 	display: flex !important;
 	white-space: normal !important;
+	margin-bottom: var(--spacing-2xs);
 
 	span {
 		white-space: normal;
@@ -83,6 +84,7 @@ export default defineComponent({
 
 	label {
 		cursor: pointer;
+		margin-bottom: 0;
 	}
 }
 </style>
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index b6c23b33e1844..31e901a36ea4c 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -4,6 +4,7 @@
 			v-if="label || $slots.options"
 			:for="inputName"
 			:class="{
+				'n8n-input-label': true,
 				[$style.inputLabel]: true,
 				[$style.heading]: !!label,
 				[$style.underline]: underline,
diff --git a/packages/design-system/src/css/checkbox.scss b/packages/design-system/src/css/checkbox.scss
index 6c118b35b3c7f..9812230e07f5f 100644
--- a/packages/design-system/src/css/checkbox.scss
+++ b/packages/design-system/src/css/checkbox.scss
@@ -96,7 +96,7 @@
 		white-space: nowrap;
 		cursor: pointer;
 		outline: none;
-		display: inline-block;
+		display: inline-flex;
 		line-height: 1;
 		position: relative;
 		vertical-align: middle;
@@ -190,6 +190,7 @@
 		position: relative;
 		border: var.$checkbox-input-border;
 		border-radius: var.$checkbox-border-radius;
+		margin-top: 2px;
 		box-sizing: border-box;
 		width: var.$checkbox-input-width;
 		height: var.$checkbox-input-height;

From b7f4923efc622ff78bb296ad68e071463a09e70c Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 18 Apr 2023 16:57:51 +0300
Subject: [PATCH 2/3] fix: use css variables in checkbox inner margin-top

---
 packages/design-system/src/css/checkbox.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/css/checkbox.scss b/packages/design-system/src/css/checkbox.scss
index 9812230e07f5f..aa31707b70357 100644
--- a/packages/design-system/src/css/checkbox.scss
+++ b/packages/design-system/src/css/checkbox.scss
@@ -190,7 +190,7 @@
 		position: relative;
 		border: var.$checkbox-input-border;
 		border-radius: var.$checkbox-border-radius;
-		margin-top: 2px;
+		margin-top: var(--spacing-5xs);
 		box-sizing: border-box;
 		width: var.$checkbox-input-width;
 		height: var.$checkbox-input-height;

From aab82567cc2fe79b3540dbbe794377460cafe201 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 18 Apr 2023 17:28:42 +0300
Subject: [PATCH 3/3] test: update snapshots

---
 .../__snapshots__/PersonalizationModal.spec.ts.snap    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/components/__tests__/__snapshots__/PersonalizationModal.spec.ts.snap b/packages/editor-ui/src/components/__tests__/__snapshots__/PersonalizationModal.spec.ts.snap
index 3ba9d14f9b6b4..e7241c7063f74 100644
--- a/packages/editor-ui/src/components/__tests__/__snapshots__/PersonalizationModal.spec.ts.snap
+++ b/packages/editor-ui/src/components/__tests__/__snapshots__/PersonalizationModal.spec.ts.snap
@@ -21,7 +21,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
             <div>
               <div class=\\"grid\\">
                 <div class=\\"\\">
-                  <div class=\\"container\\" data-test-id=\\"companyType\\"><label for=\\"companyType\\" class=\\"inputLabel heading medium\\">
+                  <div class=\\"container\\" data-test-id=\\"companyType\\"><label for=\\"companyType\\" class=\\"n8n-input-label inputLabel heading medium\\">
                       <div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> What best describes your company? <!----></span></div>
                       <!---->
                       <!---->
@@ -71,7 +71,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
                   </div>
                 </div>
                 <div class=\\"\\">
-                  <div class=\\"container\\" data-test-id=\\"role\\"><label for=\\"role\\" class=\\"inputLabel heading medium\\">
+                  <div class=\\"container\\" data-test-id=\\"role\\"><label for=\\"role\\" class=\\"n8n-input-label inputLabel heading medium\\">
                       <div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> Which role best describes you? <!----></span></div>
                       <!---->
                       <!---->
@@ -123,7 +123,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
                   </div>
                 </div>
                 <div class=\\"\\">
-                  <div class=\\"container\\" data-test-id=\\"automationBeneficiary\\"><label for=\\"automationBeneficiary\\" class=\\"inputLabel heading medium\\">
+                  <div class=\\"container\\" data-test-id=\\"automationBeneficiary\\"><label for=\\"automationBeneficiary\\" class=\\"n8n-input-label inputLabel heading medium\\">
                       <div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> Who will your automations mainly be for? <!----></span></div>
                       <!---->
                       <!---->
@@ -169,7 +169,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
                   </div>
                 </div>
                 <div class=\\"\\">
-                  <div class=\\"container\\" data-test-id=\\"companySize\\"><label for=\\"companySize\\" class=\\"inputLabel heading medium\\">
+                  <div class=\\"container\\" data-test-id=\\"companySize\\"><label for=\\"companySize\\" class=\\"n8n-input-label inputLabel heading medium\\">
                       <div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> How big is your company? <!----></span></div>
                       <!---->
                       <!---->
@@ -218,7 +218,7 @@ exports[`PersonalizationModal.vue > should render correctly 1`] = `
                   </div>
                 </div>
                 <div class=\\"\\">
-                  <div class=\\"container\\" data-test-id=\\"reportedSource\\"><label for=\\"reportedSource\\" class=\\"inputLabel heading medium\\">
+                  <div class=\\"container\\" data-test-id=\\"reportedSource\\"><label for=\\"reportedSource\\" class=\\"n8n-input-label inputLabel heading medium\\">
                       <div class=\\"title\\"><span class=\\"n8n-text size-medium bold\\"> How did you hear about n8n? <!----></span></div>
                       <!---->
                       <!---->