Today I (re-)learned row and column gap

WordPress · Jul 1, 2024 · 21950ec · 21950ec
1 parent 4c012ec
commit 21950ec
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 8 deletions.
diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
@@ -65,9 +65,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 		( { name, key, __experimentalHint, style, className } ) => {
 			const withHint = (
 				<Styled.WithHintItemWrapper>
-					<Styled.WithHintItemContent>
-						{ name }
-					</Styled.WithHintItemContent>
+					<span>{ name }</span>
 					<Styled.WithHintItemHint className="components-custom-select-control__item-hint">
 						{ __experimentalHint }
 					</Styled.WithHintItemHint>

diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
@@ -145,10 +145,8 @@ export const WithHintItemWrapper = styled.div`
 	align-items: center;
 	flex-wrap: wrap;
 	flex: 1;
-`;
-
-export const WithHintItemContent = styled.span`
-	padding-inline-end: ${ space( 4 ) };
+	column-gap: ${ space( 4 ) };
+	row-gap: ${ space( 1 ) };
 `;
 
 export const WithHintItemHint = styled.span`
@@ -159,6 +157,5 @@ export const WithHintItemHint = styled.span`
 		text-align: initial;
 		line-height: ${ CONFIG.fontLineHeightBase };
 		padding-inline-end: ${ space( 1 ) };
-		margin-block: ${ space( 1 ) };
 	}
 `;