From cf57e332fb5a961722c3822becc9c3cc280d8d0e Mon Sep 17 00:00:00 2001
From: James Kenneth Guidaven <jkguidaven@gmail.com>
Date: Tue, 10 Dec 2024 16:01:13 +0800
Subject: [PATCH] Address PR comments.

---
 .../a4a-migration-offer-v3/index.tsx          |  2 +-
 .../hero-section/style.scss                   | 34 ++++++++++---------
 .../hooks/use-compact-on-scroll.ts            |  2 +-
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/client/a8c-for-agencies/components/a4a-migration-offer-v3/index.tsx b/client/a8c-for-agencies/components/a4a-migration-offer-v3/index.tsx
index c91e316aa128a1..ea0763e83008a3 100644
--- a/client/a8c-for-agencies/components/a4a-migration-offer-v3/index.tsx
+++ b/client/a8c-for-agencies/components/a4a-migration-offer-v3/index.tsx
@@ -110,7 +110,7 @@ const MigrationOfferV3 = ( { isExpanded, onToggleView }: Props ) => {
 				) }
 			</div>
 
-			<Button className="a4a-migration-offer-v3__view-toggle" onClick={ onToggleView }>
+			<Button className="a4a-migration-offer-v3__view-toggle">
 				<Icon icon={ chevronDown } size={ 24 } />
 			</Button>
 		</div>
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/style.scss b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/style.scss
index 6eeaebaf8ddaf3..430fccc51dde20 100644
--- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/style.scss
+++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hero-section/style.scss
@@ -12,7 +12,7 @@ $tab-background-selected: var(--color-surface);
 	flex-direction: column;
 	justify-content: space-between;
 	gap: 39px;
-	transition: height 200ms ease-out;
+	transition: height .35s ease-out;
 
 	&:not(.is-compact) {
 		height: 389px;
@@ -78,22 +78,10 @@ $tab-background-selected: var(--color-surface);
 	margin: 0;
 	padding: 0;
 	height: 74px;
-
-	> li {
-		flex-grow: 1;
-	}
-
-
-	li:first-child .hosting-v3-hero-section__tab.section-nav-tab {
-		border-start-start-radius: 4px;
-	}
-
-	li:last-child .hosting-v3-hero-section__tab.section-nav-tab {
-		border-start-end-radius: 4px;
-	}
 }
 
 .hosting-v3-hero-section__tab.section-nav-tab {
+	flex-grow: 1;
 	border-bottom: none;
 
 	&,
@@ -101,18 +89,32 @@ $tab-background-selected: var(--color-surface);
 		background: $tab-background;
 	}
 
-	&.is-selected {
+	&.is-selected,
+	&.is-selected .section-nav-tab__link {
 		background: var(--color-surface);
 
 		.section-nav-tab__link:hover {
 			background: none
 		}
 	}
+
+	&:first-child {
+		border-start-start-radius: 4px;
+	}
+
+	&:last-child {
+		border-start-end-radius: 4px;
+	}
 }
 
 .hosting-v3__nav-item-label {
-	@include a4a-font-heading-lg;
+	@include a4a-font-body-md($font-weight: 500);
 	color: var( --color-text );
+	text-align: center;
+
+	@include break-medium {
+		@include a4a-font-heading-lg;
+	}
 }
 
 .hosting-v3__nav-item-subtitle {
diff --git a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts
index 99d5748c8a21ac..b8af590881dcba 100644
--- a/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts
+++ b/client/a8c-for-agencies/sections/marketplace/hosting-overview-v3/hooks/use-compact-on-scroll.ts
@@ -2,7 +2,7 @@ import { useCallback, useRef, useState } from 'react';
 
 const SCROLL_THRESHOLD_PERCENTAGE = 0.2;
 const SCROLL_THRESHOLD_NORMAL_BUFFER = 5;
-const SCROLL_THRESHOLD_COMPACT_BUFFER = 20;
+const SCROLL_THRESHOLD_COMPACT_BUFFER = 15;
 
 export default function useCompactOnScroll() {
 	const [ isCompact, setIsCompact ] = useState( false );