adjust sinzing for number of visits

Automattic · Apr 1, 2024 · 54c7d80 · 54c7d80
1 parent 348c656
commit 54c7d80
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/filter.tsx b/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/filter.tsx
@@ -66,8 +66,17 @@ export default function PlanSelectionFilter( { selectedPlan, plans, onSelectPlan
 		);
 	}, [ dispatch ] );
 
+	const additionalWrapperClass =
+		filterType === FILTER_TYPE_INSTALL
+			? 'a4a-pressable-filter-wrapper-install'
+			: 'a4a-pressable-filter-wrapper-visits';
+	const wrapperClass = classNames(
+		additionalWrapperClass,
+		'pressable-overview-plan-selection__filter'
+	);
+
 	return (
-		<section className="pressable-overview-plan-selection__filter">
+		<section className={ wrapperClass }>
 			<div className="pressable-overview-plan-selection__filter-type">
 				<p className="pressable-overview-plan-selection__filter-label">
 					{ translate( 'Filter by:' ) }

diff --git a/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/style.scss b/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/style.scss
@@ -172,3 +172,17 @@
 		color: var(--color-text-inverted);
 	}
 }
+
+.pressable-overview-plan-selection__filter {
+	.a4a-slider__marker-label {
+		height: 0.95rem;
+	}
+}
+
+.a4a-pressable-filter-wrapper-visits {
+	@include breakpoint-deprecated( "<660px" ) {
+		.a4a-slider__marker-label {
+			font-size: 0.75rem;
+		}
+	}
+}