basic large screen layout

TODO

@@ -3,7 +3,6 @@ FEN string
 Env Vars
 API base URL
 
-- style clear/save buttons
 - rearrange buttons / header space - collapse on smaller screens
 
 - add / edit headers

src/pages/Chessboard.tsx

@@ -31,68 +31,80 @@ const Chessboard = () => {
 				/>
 			</Section>
 
-			<div className="flex gap-4">
+			<div className="grid grid-cols-2 gap-4">
-				<button
+				<div>
-					className="btn btn-primary"
+					<PgnViewer
-					type="button"
+						gamePgn={gameState.pgn || ""}
-					onClick={handleClearGame}
+						handlePlyChange={handlePlyChange}
-				>
-					Clear Game
-				</button>
-
-				<button
-					className="btn btn-secondary"
-					type="button"
-					onClick={handleSavePgn}
-					disabled={!gameState.pgn}
-				>
-					Save PGN
-				</button>
-
-				<button
-					className="btn btn-secondary"
-					type="button"
-					onClick={handleSavePdf}
-					disabled={!gameState.pgn || generatingPdf}
-				>
-					Save PDF
-				</button>
-			</div>
-			<PgnViewer
-				gamePgn={gameState.pgn || ""}
-				handlePlyChange={handlePlyChange}
-			/>
-			<div className="flex justify-between max-w-150 mt-2">
-				<div className="flex gap-2 items-center">
-					<label
-						htmlFor="diagram-add"
-						className="text-sm text-(--base-content)"
-					>
-						Select Diagram
-					</label>
-					<input
-						id="diagram-toggle"
-						name="diagram-toggle"
-						type="checkbox"
-						className="checkbox-accent"
-						checked={gameState.diagrams.some(
-							(d) => d.ply === currentPosition.ply,
-						)}
-						onChange={handleToggleDiagram}
 					/>
+					<div className="grid grid-cols-3 gap-2 max-w-150 mt-2">
+						<button
+							className="btn btn-primary"
+							type="button"
+							onClick={handleClearGame}
+						>
+							Clear Game
+						</button>
+						<div className="flex gap-2 items-center">
+							<label
+								htmlFor="diagram-add"
+								className="text-sm text-(--base-content)"
+							>
+								Select Diagram
+							</label>
+							<input
+								id="diagram-toggle"
+								name="diagram-toggle"
+								type="checkbox"
+								className="checkbox-accent"
+								checked={gameState.diagrams.some(
+									(d) => d.ply === currentPosition.ply,
+								)}
+								onChange={handleToggleDiagram}
+							/>
+						</div>
+
+						<label className="toggle text-sm text-(--base-content)">
+							Render move times
+							<input
+								id="render-times"
+								name="render-times"
+								type="checkbox"
+								checked={gameState.diagramClock}
+								onChange={handleToggleClock}
+							/>
+							<span className="slider round" />
+						</label>
+					</div>
 				</div>
 
-				<label className="toggle text-sm text-(--base-content)">
+				<div className="flex gap-4">
-					Render move times
+					{/*<button*/}
-					<input
+					{/*	className="btn btn-primary"*/}
-						id="render-times"
+					{/*	type="button"*/}
-						name="render-times"
+					{/*	onClick={handleClearGame}*/}
-						type="checkbox"
+					{/*>*/}
-						checked={gameState.diagramClock}
+					{/*	Clear Game*/}
-						onChange={handleToggleClock}
+					{/*</button>*/}
-					/>
+
-					<span className="slider round" />
+					<button
-				</label>
+						className="btn btn-secondary"
+						type="button"
+						onClick={handleSavePgn}
+						disabled={!gameState.pgn}
+					>
+						Save PGN
+					</button>
+
+					<button
+						className="btn btn-secondary"
+						type="button"
+						onClick={handleSavePdf}
+						disabled={!gameState.pgn || generatingPdf}
+					>
+						Save PDF
+					</button>
+				</div>
 			</div>
 		</main>
 	);

src/styles/_button.css

@@ -1,8 +1,12 @@
 .btn {
+	display: inline-flex;
 	font-size: 1rem;
 	font-weight: bold;
 	cursor: pointer;
 	border-radius: 0.5rem;
+	height: 50px;
+	align-items: center;
+	justify-items: center;
 
 	transition: all 0.3s ease;
 
@@ -17,6 +21,7 @@
 	font-size: 1.25rem;
 	padding: 1rem 4rem;
 	border-radius: 1.5rem;
+	height: auto;
 }
 
 .btn-primary {