fix styling of free and included tiers

Automattic · Feb 18, 2025 · 5ec66c2 · 5ec66c2
1 parent e03ac93
commit 5ec66c2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/client/components/theme-tier/theme-tier-badge/style.scss b/client/components/theme-tier/theme-tier-badge/style.scss
@@ -47,8 +47,13 @@
 	}
 }
 
-.theme-tier-included-label {
+.theme-tier-free-included-label {
 	border-radius: 4px;
+	font-family: $sans;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: $font-body-extra-small;
 }
 
 .theme-tier-badge-tooltip,

diff --git a/client/components/theme-tier/theme-tier-badge/theme-tier-free-badge.js b/client/components/theme-tier/theme-tier-badge/theme-tier-free-badge.js
@@ -4,5 +4,9 @@ import { useTranslate } from 'i18n-calypso';
 export default function ThemeTierFreeBadge() {
 	const translate = useTranslate();
 
-	return <Badge type="info">{ translate( 'Free' ) }</Badge>;
+	return (
+		<Badge type="info" className="theme-tier-free-included-label">
+			{ translate( 'Free' ) }
+		</Badge>
+	);
 }
diff --git a/client/components/theme-tier/theme-tier-badge/theme-tier-included-badge.js b/client/components/theme-tier/theme-tier-badge/theme-tier-included-badge.js
@@ -6,7 +6,7 @@ export default function ThemeTierIncludedBadge() {
 	const translate = useTranslate();
 
 	return (
-		<Badge type="info" className="theme-tier-included-label">
+		<Badge type="info" className="theme-tier-free-included-label">
 			{ translate( 'Included with plan' ) }
 		</Badge>
 	);