fix: Fix n8n-checkbox alignment (#6004)

* fix: fix n8n-checkbox alignment

* fix: use css variables in checkbox inner margin-top

* test: update snapshots

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>

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,

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: var(--spacing-5xs);
 		box-sizing: border-box;
 		width: var.$checkbox-input-width;
 		height: var.$checkbox-input-height;