revert some unneeded changes

guardian · Jan 23, 2025 · ad24000 · ad24000
1 parent 3476d18
commit ad24000
Showing 1 changed file with 37 additions and 37 deletions.
diff --git a/libs/@guardian/react-crossword/src/components/StickyClue.tsx b/libs/@guardian/react-crossword/src/components/StickyClue.tsx
@@ -2,8 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import { isUndefined } from '@guardian/libs';
 import { textSans15 } from '@guardian/source/foundations';
-import type { ForwardedRef } from 'react';
-import { forwardRef } from 'react';
+import { memo } from 'react';
 import { useCurrentClue } from '../context/CurrentClue';
 import { useData } from '../context/Data';
 import { Clue } from './Clue';
@@ -12,40 +11,41 @@ type StickyClueProps = {
 	styles?: SerializedStyles;
 };
 
-export const StickyClue = forwardRef(
-	(props: StickyClueProps, forwardedRef: ForwardedRef<HTMLDivElement>) => {
-		const { entries } = useData();
-		const { currentEntryId } = useCurrentClue();
-		const entry = !isUndefined(currentEntryId)
-			? entries.get(currentEntryId)
-			: undefined;
+export const StickyClueComponent = (props: StickyClueProps) => {
+	const { entries } = useData();
+	const { currentEntryId } = useCurrentClue();
+	const entry = !isUndefined(currentEntryId)
+		? entries.get(currentEntryId)
+		: undefined;
 
-		const stickyClue = css`
-			top: 0;
-			position: sticky;
-			display: flex;
-			z-index: 1;
-			min-height: 3.5em;
-			justify-content: center;
-			${textSans15};
-			background: white;
-		`;
+	const stickyClue = css`
+		top: 0;
+		position: sticky;
+		display: flex;
+		z-index: 1;
+		min-height: 3.5em;
+		justify-content: center;
+		align-items: start;
+		${textSans15};
+		background: white;
+		* {
+			padding: 0;
+		}
+	`;
 
-		return (
-			<div
-				aria-hidden={true}
-				css={[props.styles, stickyClue]}
-				ref={forwardedRef}
-			>
-				{entry && (
-					<Clue
-						entry={entry}
-						css={css`
-							margin: 0 5px;
-						`}
-					/>
-				)}
-			</div>
-		);
-	},
-);
+	return (
+		<div aria-hidden={true} css={[props.styles, stickyClue]}>
+			{entry && (
+				<Clue
+					entry={entry}
+					css={css`
+						margin: 0 5px;
+						padding: 0;
+					`}
+				/>
+			)}
+		</div>
+	);
+};
+
+export const StickyClue = memo(StickyClueComponent);