From af6809874cca621cf2e7575b4d7370eac6ec4720 Mon Sep 17 00:00:00 2001
From: Owen Rees <owenrees.dev@gmail.com>
Date: Wed, 3 Jun 2026 20:59:45 +0200
Subject: [PATCH] headers form fields now in flex box and with max width and
 gaps

---
 TODO                             | 4 +++-
 src/components/CustomHeaders.tsx | 4 ++--
 src/components/HeaderFields.tsx  | 4 ++--
 src/pages/Chessboard.tsx         | 4 ++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/TODO b/TODO
index 1f4eb85..a05469c 100644
--- a/TODO
+++ b/TODO
@@ -1,4 +1,4 @@
-- favicon / og / json-sd
+- og / json-sd
 - rearrange buttons / header space - collapse on smaller screens
 - Lichess login
 - logger
@@ -7,3 +7,5 @@
 - set game current position on game load to ply 0 and whatever the FEN is (starting position probably, but could be custom position)
 - privacy policy - have no access to anything you generate, only keep a count of success/failed pdf generations with timestamp and error message
 - fix SSR related console errors etc
+- a11y and lighthouse fixes
+- check wcag compliance
diff --git a/src/components/CustomHeaders.tsx b/src/components/CustomHeaders.tsx
index 6c89a12..10ca91b 100644
--- a/src/components/CustomHeaders.tsx
+++ b/src/components/CustomHeaders.tsx
@@ -9,7 +9,7 @@ interface IProps {
 
 const CustomHeaders = ({ headers, updateHeaders }: IProps) => {
 	return (
-		<div className="mt-4 w-full">
+		<div className="mt-4 w-full max-w-175">
 			<details className="bg-(--neutral-content)/20 p-4 rounded-lg">
 				<summary>
 					Custom Headers (PDF)
@@ -19,7 +19,7 @@ const CustomHeaders = ({ headers, updateHeaders }: IProps) => {
 					</p>
 				</summary>
 				<div>
-					<form className="grid place-items-center gap-4 sm:grid-cols-2 mt-2">
+					<form className="flex flex-wrap mt-2 justify-center gap-4">
 						<FormField
 							fieldName="title"
 							type="text"
diff --git a/src/components/HeaderFields.tsx b/src/components/HeaderFields.tsx
index 6b2ac77..52ef87e 100644
--- a/src/components/HeaderFields.tsx
+++ b/src/components/HeaderFields.tsx
@@ -9,14 +9,14 @@ interface IProps {
 
 const HeaderFields = ({ headers, updateHeaders }: IProps) => {
 	return (
-		<div className="mt-4 w-full">
+		<div className="mt-4 w-full max-w-175">
 			<details className="bg-(--neutral-content)/15 p-4 rounded-lg">
 				<summary>
 					Headers
 					<p className="text-sm font-normal">Edit the game PGN headers</p>
 				</summary>
 				<div>
-					<form className="grid place-items-center gap-4 sm:grid-cols-2 mt-2">
+					<form className="flex flex-wrap mt-2 justify-center gap-4">
 						<FormField
 							fieldName="event"
 							type="text"
diff --git a/src/pages/Chessboard.tsx b/src/pages/Chessboard.tsx
index c741e91..11ea223 100644
--- a/src/pages/Chessboard.tsx
+++ b/src/pages/Chessboard.tsx
@@ -46,9 +46,9 @@ const Chessboard = () => {
 				/>
 			</Section>
 
-			<div className="grid grid-cols-2 gap-4">
+			<div className="grid lg:grid-cols-2 gap-4">
 				<Suspense fallback={<LoadingBoard />}>
-					<div>
+					<div className="mx-auto">
 						<PgnViewer
 							gamePgn={gameState.pgn || ""}
 							handlePlyChange={handlePlyChange}