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,7 +31,13 @@ const Chessboard = () => {
 				/>
 			</Section>
 
-			<div className="flex gap-4">
+			<div className="grid grid-cols-2 gap-4">
+				<div>
+					<PgnViewer
+						gamePgn={gameState.pgn || ""}
+						handlePlyChange={handlePlyChange}
+					/>
+					<div className="grid grid-cols-3 gap-2 max-w-150 mt-2">
 						<button
 							className="btn btn-primary"
 							type="button"
@@ -39,30 +45,6 @@ const Chessboard = () => {
 						>
 							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"
@@ -94,6 +76,36 @@ const Chessboard = () => {
 							<span className="slider round" />
 						</label>
 					</div>
+				</div>
+
+				<div className="flex gap-4">
+					{/*<button*/}
+					{/*	className="btn btn-primary"*/}
+					{/*	type="button"*/}
+					{/*	onClick={handleClearGame}*/}
+					{/*>*/}
+					{/*	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>
+			</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 {