From fd30c4460e73269371cf71d4eaa19ba78397e7de Mon Sep 17 00:00:00 2001
From: RJ <27843274+rjchow@users.noreply.github.com>
Date: Tue, 20 Aug 2024 07:37:32 +0800
Subject: [PATCH] fix: core profiler sticky footer button variable vh
 breakpoints (#50727)

* fix: core profiler sticky footer button variable vh breakpoints

* lint

* lint
---
 .../client/core-profiler/pages/Plugins.tsx    | 19 +++++-
 .../client/core-profiler/style.scss           | 60 ++++++++++++++++++-
 ...core-profiler-plugins-sticky-footer-button |  4 ++
 3 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 plugins/woocommerce/changelog/fix-core-profiler-plugins-sticky-footer-button

diff --git a/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx b/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx
index f3c50c28bc3..8964ed1ab2c 100644
--- a/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx
+++ b/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx
@@ -7,6 +7,7 @@ import interpolateComponents from '@automattic/interpolate-components';
 import { Link } from '@woocommerce/components';
 import { Extension, ExtensionList } from '@woocommerce/data';
 import { useState } from 'react';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -146,6 +147,10 @@ export const Plugins = ( {
 		].includes( plugin.key )
 	);
 
+	const pluginsCardRowCount = Math.ceil(
+		context.pluginsAvailable.length / 2
+	);
+
 	return (
 		<div
 			className="woocommerce-profiler-plugins"
@@ -170,7 +175,12 @@ export const Plugins = ( {
 				{ errorMessage && (
 					<p className="plugin-error">{ errorMessage }</p>
 				) }
-				<div className="woocommerce-profiler-plugins__list">
+				<div
+					className={ clsx(
+						'woocommerce-profiler-plugins__list',
+						`rows-${ pluginsCardRowCount }`
+					) }
+				>
 					{ context.pluginsAvailable.map( ( plugin ) => {
 						const learnMoreLink = plugin.learn_more_link ? (
 							<Link
@@ -219,7 +229,12 @@ export const Plugins = ( {
 						);
 					} ) }
 				</div>
-				<div className="woocommerce-profiler-plugins__footer">
+				<div
+					className={ clsx(
+						'woocommerce-profiler-plugins__footer',
+						`rows-${ pluginsCardRowCount }`
+					) }
+				>
 					<div className="woocommerce-profiler-plugins-continue-button-container">
 						<Button
 							className="woocommerce-profiler-plugins-continue-button"
diff --git a/plugins/woocommerce-admin/client/core-profiler/style.scss b/plugins/woocommerce-admin/client/core-profiler/style.scss
index 1378c8b90d7..b7d3679a547 100644
--- a/plugins/woocommerce-admin/client/core-profiler/style.scss
+++ b/plugins/woocommerce-admin/client/core-profiler/style.scss
@@ -345,12 +345,44 @@
 			margin-top: 12px !important;
 		}
 	}
+
+	$sticky-footer-height: 140px;
+
 	.woocommerce-profiler-plugins__list {
 		display: flex;
 		flex-direction: row;
 		flex-wrap: wrap;
 		gap: 16px;
 		flex: 50%;
+
+		@mixin sticky-footer-scroll-padding {
+			padding-bottom: $sticky-footer-height;
+		}
+
+		@include breakpoint(">782px") {// sticky footer shouldn't apply to mobile layout
+			// since the height of each card is more or less fixed (actually its variable but we limit text to 2 lines),
+			// we can estimate the visual breakpoints that are required to "unstick" the footer from the bottom of the page.
+			&.rows-1 {
+				@media screen and ( max-height: 520px ) {
+					@include sticky-footer-scroll-padding;
+				}
+			}
+			&.rows-2 {
+				@media screen and ( max-height: 650px ) {
+					@include sticky-footer-scroll-padding;
+				}
+			}
+			&.rows-3 {
+				@media screen and ( max-height: 780px ) {
+					@include sticky-footer-scroll-padding;
+				}
+			}
+			&.rows-4 {
+				@media screen and ( max-height: 910px ) {
+					@include sticky-footer-scroll-padding;
+				}
+			}
+		}
 	}
 
 	.woocommerce-profiler-plugins-continue-button {
@@ -392,12 +424,38 @@
 		flex-direction: column;
 		align-items: center;
 
-		@media screen and ( max-height: 900px ) {
+		@mixin plugins-sticky-footer {
 			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 44.69%);
 			height: 140px;
 			position: fixed;
 			bottom: 0;
 		}
+
+		@include breakpoint(">782px") { // sticky footer shouldn't apply to mobile layout
+			// since the height of each card is more or less fixed (actually its variable but we limit text to 2 lines),
+			// we can estimate the visual breakpoints that are required to "unstick" the footer from the bottom of the page.
+			&.rows-1 {
+				@media screen and ( max-height: 520px ) {
+					@include plugins-sticky-footer;
+				}
+			}
+			&.rows-2 {
+				@media screen and ( max-height: 650px ) {
+					@include plugins-sticky-footer;
+				}
+			}
+			&.rows-3 {
+				@media screen and ( max-height: 780px ) {
+					@include plugins-sticky-footer;
+				}
+			}
+			&.rows-4 {
+				@media screen and ( max-height: 910px ) {
+					@include plugins-sticky-footer;
+				}
+			}
+		}
+
 	}
 
 	.woocommerce-profiler-plugins-continue-button-container {
diff --git a/plugins/woocommerce/changelog/fix-core-profiler-plugins-sticky-footer-button b/plugins/woocommerce/changelog/fix-core-profiler-plugins-sticky-footer-button
new file mode 100644
index 00000000000..c3db3698dcd
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-core-profiler-plugins-sticky-footer-button
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fixed Core Profiler's sticky footer button problem