Fix design picker active theme styles (#99333)

Automattic · Feb 6, 2025 · 6f55209 · 6f55209
1 parent fb86ffd
commit 6f55209
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/design-picker/src/components/style.scss b/packages/design-picker/src/components/style.scss
@@ -36,7 +36,7 @@
 		@include break-large {
 			margin-bottom: 64px;
 		}
-		
+
 		.design-picker__design-card-title {
 			position: sticky;
 			top: 0;
@@ -66,7 +66,9 @@
 
 		.theme-card__info {
 			margin-top: 8px;
-			height: auto;
+			&:not(:has(.theme-card__info-badge-container)) {
+				height: auto;
+			}
 
 			@include break-small {
 				margin-top: 12px;

diff --git a/packages/design-picker/src/components/theme-card/style.scss b/packages/design-picker/src/components/theme-card/style.scss
@@ -16,6 +16,7 @@ $theme-card-info-margin-top: 16px;
 		.theme-card__image-container {
 			box-shadow: 0 0 0 2px var(--color-primary);
 			border-radius: 4px;
+			z-index: 10;
 		}
 	}
 
@@ -64,7 +65,7 @@ $theme-card-info-margin-top: 16px;
 .theme-card--is-actionable {
 	.theme-card__image {
 		transition: transform 300ms ease-in-out;
-		
+
 		&:hover,
 		&:focus {
 			transform: scale(1.03);