Crossword: Print layout improvements (#13549)

jamesmockett · web-flow · commit 6670684f9d33 · 2025-03-07T10:17:35.000Z
* Override layout for print

* Update to latest crossword canary release
diff --git a/dotcom-rendering/package.json b/dotcom-rendering/package.json
@@ -50,7 +50,7 @@
 		"@guardian/libs": "22.0.0",
 		"@guardian/ophan-tracker-js": "2.2.5",
 		"@guardian/react-crossword": "2.0.2",
-		"@guardian/react-crossword-next": "npm:@guardian/react-crossword@0.0.0-canary-20250303163323",
+		"@guardian/react-crossword-next": "npm:@guardian/react-crossword@0.0.0-canary-20250306122933",
 		"@guardian/shimport": "1.0.2",
 		"@guardian/source": "8.0.0",
 		"@guardian/source-development-kitchen": "12.0.0",
diff --git a/dotcom-rendering/src/components/CrosswordComponent.importable.tsx b/dotcom-rendering/src/components/CrosswordComponent.importable.tsx
@@ -105,6 +105,9 @@ const Layout: CrosswordProps['Layout'] = ({
 				${from.tablet} {
 					flex-direction: row;
 				}
+				@media print {
+					flex-direction: column;
+				}
 			`}
 		>
 			<AnagramHelper />
@@ -200,6 +203,9 @@ const Layout: CrosswordProps['Layout'] = ({
 						> * {
 							flex: 1;
 						}
+						@media print {
+							flex-direction: row;
+						}
 					`}
 				>
 					<Clues
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -105,6 +105,9 @@ const Layout: CrosswordProps['Layout'] = ({`
`105`	`105`	`${from.tablet} {`
`106`	`106`	`flex-direction: row;`
`107`	`107`	`}`
	`108`	`+ @media print {`
	`109`	`+ flex-direction: column;`
	`110`	`+ }`
`108`	`111`	`}
`109`	`112`	`>`
`110`	`113`	`<AnagramHelper />`
`@@ -200,6 +203,9 @@ const Layout: CrosswordProps['Layout'] = ({`
`200`	`203`	`> * {`
`201`	`204`	`flex: 1;`
`202`	`205`	`}`
	`206`	`+ @media print {`
	`207`	`+ flex-direction: row;`
	`208`	`+ }`
`203`	`209`	`}
`204`	`210`	`>`
`205`	`211`	`<Clues`