Make BookingPage and ConfirmedBookingPage responsive

src/index.css

@@ -11,6 +11,13 @@
 	--secondary-1: #edefee;
 }
 
+#root {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	justify-content: space-between;
+}
+
 body {
 	margin: 0;
 }

src/routes/BookingPage.jsx

@@ -8,6 +8,7 @@ export const BookingPage = ({
 	reservationError
 }) => (
 	<section className="booking">
+		<div className="booking-container">
 			<h1>Book a Table</h1>
 			<hr />
 			<BookingForm
@@ -16,5 +17,6 @@ export const BookingPage = ({
 				submitForm={submitForm}
 				reservationError={reservationError}
 			/>
+		</div>
 	</section>
 )

src/routes/ConfirmedBookingPage.jsx

@@ -4,7 +4,8 @@ import "../styles/ConfirmedBookingPage.css"
 export const ConfirmedBookingPage = () => (
 	<article className="confirmed">
 		<h1>Booking Confirmed</h1>
-		<p>Your booking has been confirmed.</p>
-		<Link to="/">Back to home</Link>
+		<p>
+			Your booking has been confirmed. <Link to="/">Back to home</Link>
+		</p>
 	</article>
 )

src/styles/BookingForm.css

@@ -2,7 +2,6 @@
 	display: flex;
 	flex-direction: column;
 	gap: 0.2rem;
-	min-width: 20rem;
 }
 
 .booking-form :is(label, .submit) {
@@ -18,6 +17,7 @@
 }
 
 .booking-form .submit {
+	margin-top: 1.8rem;
 	background-color: #fbdabb;
 }
 

src/styles/BookingPage.css

@@ -1,13 +1,16 @@
-.booking {
+.booking-container {
 	display: flex;
-	flex-direction: column;
-	align-items: center;
-	background-color: #495e57;
-	padding: 1rem;
-	border-radius: 1rem;
-	gap: 1rem;
-	width: 70%;
 	margin: auto;
+	flex-direction: column;
+	background-color: var(--primary-1);
+	padding: 1.8rem;
+	border-radius: 1rem;
+	max-width: 50rem;
+}
+
+.booking {
+	width: 100%;
+	padding: 1rem;
 }
 
 .booking h1 {

src/styles/ConfirmedBookingPage.css

@@ -1,7 +1,12 @@
 .confirmed {
 	background-color: var(--primary-1);
 	border-radius: 2rem;
-	margin: auto;
-	padding: 2rem 3rem;
+	margin: 2rem;
+	padding: 2rem 1rem;
 	text-align: center;
 }
+
+.confirmed h1 {
+	font-size: 2rem;
+	margin: 0;
+}

src/styles/Specials.css

@@ -4,7 +4,7 @@
 }
 
 .specials {
-	margin: 1rem;
+	margin: auto;
 }
 
 .specials h2 {