Add a little breathing space around slider

WordPress · Feb 3, 2022 · f0506b9 · f0506b9
1 parent 63c6812
commit f0506b9
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 2 deletions.
diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -63,7 +63,7 @@ const BorderBoxControl = (
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
 			/>
-			<HStack alignment={ 'start' } expanded={ true } spacing={ 3 }>
+			<HStack alignment={ 'start' } expanded={ true } spacing={ 0 }>
 				{ isLinked ? (
 					<BorderControl
 						className={ linkedControlClassName }

diff --git a/packages/components/src/border-box-control/styles.ts b/packages/components/src/border-box-control/styles.ts
@@ -37,6 +37,7 @@ export const SplitBorderControl = css`
 	position: relative;
 	gap: ${ space( 4 ) };
 	flex: 1;
+	margin-right: ${ space( 3 ) };
 `;
 
 export const CenteredBorderControl = css`

diff --git a/packages/components/src/border-control/border-control/component.tsx b/packages/components/src/border-control/border-control/component.tsx
@@ -62,7 +62,7 @@ const BorderControl = (
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
 			/>
-			<HStack spacing={ 2 }>
+			<HStack spacing={ 3 }>
 				<HStack className={ innerWrapperClassName } style={ { width } }>
 					<BorderDropdown
 						border={ border }

diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts
@@ -147,6 +147,7 @@ export const BorderStyleButton = css`
 
 export const BorderSlider = css`
 	flex: 1 1 60%;
+	margin-right: ${ space( 3 ) };
 
 	> div {
 		margin-bottom: 0;