Further crossword print layout optimisation (#13667)

* Additional print overrides to optimise layout

* Update max width of grid

Author: jamesmockett

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

@@ -4,8 +4,10 @@ import type { CrosswordProps } from '@guardian/react-crossword-next';
 import {
 	between,
 	from,
+	headlineBold14,
 	headlineBold17,
 	space,
+	textSans12,
 	textSans14,
 	textSansItalic12,
 } from '@guardian/source/foundations';
@@ -29,6 +31,12 @@ const CluesHeader = memo(({ children }: { children: ReactNode }) => {
 				height: 2em;
 				margin-bottom: 0.5em;
 				text-transform: capitalize;
+				@media print {
+					${headlineBold14};
+					border: none;
+					height: auto;
+					margin-bottom: 0.25em;
+				}
 			`}
 		>
 			{children}
@@ -114,6 +122,11 @@ const Layout: CrosswordProps['Layout'] = ({
 			<div
 				css={css`
 					flex-basis: ${gridWidth}px;
+					@media print {
+						flex-basis: auto;
+						max-width: 400px;
+						max-height: 400px;
+					}
 				`}
 			>
 				<FocusedClue
@@ -211,6 +224,7 @@ const Layout: CrosswordProps['Layout'] = ({
 						}
 						@media print {
 							flex-direction: row;
+							${textSans12};
 						}
 					`}
 				>

dotcom-rendering/src/layouts/CrosswordLayout.tsx

@@ -71,6 +71,17 @@ const CrosswordGrid = ({ children }: { children: React.ReactNode }) => (
 					'meta   instructions  .'
 					'body   body          right-column';
 			}
+
+			@media print {
+				grid-template-columns: 1fr;
+				grid-template-areas:
+					'title'
+					'headline'
+					'standfirst'
+					'meta'
+					'instructions'
+					'body';
+			}
 		`}
 	>
 		{children}