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 ( -
+

{ 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; + } + } +}