adjusted the button size and alignment

Automattic · Dec 10, 2024 · c25ac4b · c25ac4b
1 parent 64b4b3c
commit c25ac4b
Showing 1 changed file with 14 additions and 15 deletions.
diff --git a/packages/design-picker/src/components/style.scss b/packages/design-picker/src/components/style.scss
@@ -44,8 +44,9 @@
 
 			.design-picker__category-group-content {
 				display: flex;
+				align-items: center;
 				flex-wrap: wrap;
-				gap: 16px;
+				gap: 8px 16px;
 			}
 		}
 
@@ -55,24 +56,22 @@
 			font-weight: 500;
 		}
 
+		.design-picker__tier-filter {
+			height: 40px; // match button height
+			margin-bottom: 6px;
+		}
+
 		.design-picker__design-your-own-button {
 			flex-shrink: 0;
-			height: 32px;
-			line-height: 14px;
-			margin-top: 8px;
-			margin-bottom: 8px;
-
-			&.design-picker__design-with-ai {
-				display: none;
-
-				@include break-small {
-					display: block;
-				}
-			}
+			margin-bottom: 6px;
 		}
 
-		.design-picker__tier-filter {
-			height: 48px; // match button height
+		.design-picker__design-with-ai {
+			display: none;
+
+			@include break-small {
+				display: block;
+			}
 		}
 
 		.design-picker__design-your-own-button-without-categories {