Crosswords: scrollable clue list (#13507)

* Update to latest crossword canary

* Scrollable clue list on tablet

* Make clues scrollable until leftCol

* Add gradient overlay to clue list

* Update gradient visibilty on load and when window resized

Author: jamesmockett

dotcom-rendering/package.json

@@ -50,7 +50,7 @@
 		"@guardian/libs": "21.6.0",
 		"@guardian/ophan-tracker-js": "2.2.5",
 		"@guardian/react-crossword": "2.0.2",
-		"@guardian/react-crossword-next": "npm:@guardian/[email protected]20250226111729",
+		"@guardian/react-crossword-next": "npm:@guardian/[email protected]20250303163323",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "8.0.0",
 		"@guardian/source-development-kitchen": "12.0.0",

dotcom-rendering/src/components/CrosswordComponent.importable.tsx

@@ -2,15 +2,18 @@ import { css } from '@emotion/react';
 import { Crossword as ReactCrossword } from '@guardian/react-crossword-next';
 import type { CrosswordProps } from '@guardian/react-crossword-next';
 import {
+	between,
 	from,
 	headlineBold17,
 	space,
 	textSans14,
 	textSansItalic12,
 } from '@guardian/source/foundations';
 import { Hide } from '@guardian/source/react-components';
+import libDebounce from 'lodash.debounce';
 import type { ReactNode } from 'react';
-import { memo } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
+import { removeMediaRulePrefix, useMatchMedia } from '../lib/useMatchMedia';
 import { palette } from '../palette';
 import { AdSlot } from './AdSlot.web';
 
@@ -51,13 +54,55 @@ const Layout: CrosswordProps['Layout'] = ({
 	gridWidth,
 	MobileBannerAd,
 }) => {
+	const cluesRef = useRef<HTMLDivElement>(null);
+	const [showGradient, setShowGradient] = useState(false);
+
+	const betweenTabletAndLeftCol = useMatchMedia(
+		removeMediaRulePrefix(between.tablet.and.leftCol),
+	);
+
+	const updateGradientVisibility = () => {
+		const clueList = cluesRef.current;
+		if (!clueList) return;
+		const scrollPos = clueList.scrollTop;
+		const maxScroll = clueList.scrollHeight - clueList.clientHeight;
+		setShowGradient(scrollPos < maxScroll - 16);
+	};
+
+	useEffect(() => {
+		const clueList = cluesRef.current;
+		if (!clueList) return;
+
+		updateGradientVisibility();
+
+		clueList.addEventListener(
+			'scroll',
+			libDebounce(updateGradientVisibility, 100),
+		);
+		window.addEventListener(
+			'resize',
+			libDebounce(updateGradientVisibility, 100),
+		);
+
+		return () => {
+			clueList.removeEventListener(
+				'scroll',
+				libDebounce(updateGradientVisibility, 100),
+			);
+			window.removeEventListener(
+				'resize',
+				libDebounce(updateGradientVisibility, 100),
+			);
+		};
+	}, []);
+
 	return (
 		<div
 			css={css`
 				display: flex;
 				flex-direction: column;
 				gap: ${space[4]}px;
-				${from.phablet} {
+				${from.tablet} {
 					flex-direction: row;
 				}
 			`}
@@ -71,7 +116,7 @@ const Layout: CrosswordProps['Layout'] = ({
 				<FocusedClue
 					additionalCss={css`
 						max-width: ${gridWidth}px;
-						${from.phablet} {
+						${from.tablet} {
 							display: none;
 						}
 					`}
@@ -85,7 +130,8 @@ const Layout: CrosswordProps['Layout'] = ({
 				>
 					<FocusedClue
 						additionalCss={css`
-							${from.phablet} {
+							max-width: ${gridWidth}px;
+							${from.tablet} {
 								display: none;
 							}
 						`}
@@ -106,22 +152,67 @@ const Layout: CrosswordProps['Layout'] = ({
 
 			<div
 				css={css`
-					${textSans14};
+					position: relative;
 					flex: 1;
 					display: flex;
-					flex-direction: column;
-					gap: ${space[4]}px;
-					align-items: flex-start;
-					${from.desktop} {
-						flex-direction: row;
+					${from.tablet} {
+						max-height: ${gridWidth}px;
+						::after {
+							display: ${showGradient ? 'block' : 'none'};
+							position: absolute;
+							content: '';
+							bottom: 0;
+							left: 0;
+							width: 100%;
+							height: 64px;
+							background-image: linear-gradient(
+								180deg,
+								transparent,
+								${palette('--article-background')}
+							);
+						}
 					}
-					> * {
-						flex: 1;
+					${from.leftCol} {
+						max-height: none;
+						::after {
+							background-image: none;
+						}
 					}
 				`}
 			>
-				<Clues direction="across" Header={CluesHeader} />
-				<Clues direction="down" Header={CluesHeader} />
+				<div
+					ref={cluesRef}
+					css={css`
+						${textSans14};
+						flex: 1;
+						display: flex;
+						flex-direction: column;
+						gap: ${space[4]}px;
+						${from.tablet} {
+							overflow-y: scroll;
+						}
+						${from.desktop} {
+							flex-direction: row;
+						}
+						${from.leftCol} {
+							overflow: visible;
+						}
+						> * {
+							flex: 1;
+						}
+					`}
+				>
+					<Clues
+						direction="across"
+						Header={CluesHeader}
+						scrollToSelected={betweenTabletAndLeftCol}
+					/>
+					<Clues
+						direction="down"
+						Header={CluesHeader}
+						scrollToSelected={betweenTabletAndLeftCol}
+					/>
+				</div>
 			</div>
 		</div>
 	);