From 54c7d80686f98fd8d92399c9ca1c9f57e99b4e93 Mon Sep 17 00:00:00 2001
From: Andrii <lysenkoa.work@gmail.com>
Date: Mon, 1 Apr 2024 14:01:46 -0700
Subject: [PATCH] adjust sinzing for number of visits

---
 .../pressable-overview/plan-selection/filter.tsx   | 11 ++++++++++-
 .../pressable-overview/plan-selection/style.scss   | 14 ++++++++++++++
 2 files changed, 24 insertions(+), 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
index 564fd2aa625bb..60255d46a5491 100644
--- 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
index c4f07fea7b0d7..25cab6194b015 100644
--- 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;
+		}
+	}
+}