headers form fields now in flex box and with max width and gaps

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

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"

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"

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}