Adjust card style on smaller screens

Automattic · Nov 4, 2024 · 69f25b6 · 69f25b6
1 parent 2b9479c
commit 69f25b6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/projects/packages/my-jetpack/_inc/components/evaluation-recommendations/index.tsx b/projects/packages/my-jetpack/_inc/components/evaluation-recommendations/index.tsx
@@ -9,7 +9,7 @@ import useEvaluationRecommendations from '../../data/evaluation-recommendations/
 import useAnalytics from '../../hooks/use-analytics';
 import { JetpackModuleToProductCard } from '../product-cards-section/all';
 import styles from './style.module.scss';
-import type { FC } from 'react';
+import type { FC, RefObject } from 'react';
 
 const EvaluationRecommendations: FC = () => {
 	const containerRef = useRef( null );
@@ -28,7 +28,7 @@ const EvaluationRecommendations: FC = () => {
 	}, [ containerRef ] );
 
 	const handleSlide = (
-		cardContainerRef: React.RefObject< HTMLUListElement >,
+		cardContainerRef: RefObject< HTMLUListElement >,
 		direction: number,
 		gap: number = 24
 	) => {
@@ -74,13 +74,11 @@ const EvaluationRecommendations: FC = () => {
 		if ( container ) {
 			container.addEventListener( 'scroll', checkScrollPosition );
 			checkScrollPosition();
-		}
 
-		return () => {
-			if ( container ) {
+			return () => {
 				container.removeEventListener( 'scroll', checkScrollPosition );
-			}
-		};
+			};
+		}
 	}, [ checkScrollPosition ] );
 
 	useEffect( () => {

diff --git a/projects/packages/my-jetpack/_inc/components/evaluation-recommendations/style.module.scss b/projects/packages/my-jetpack/_inc/components/evaluation-recommendations/style.module.scss
@@ -31,6 +31,14 @@ ul.recommendations-list {
 		grid-column-end: unset;
 	}
 
+	@media screen and (max-width: 600px) {
+		grid-template-columns: repeat( 5, 100% );
+
+		li {
+			min-width: unset;
+		}
+	}
+
 	@media screen and (max-width: 1024px) {
 		li {
 			min-width: 450px;