From 03e6c3fe3150ced5c6df1464bcd39c411fb70f82 Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Thu, 4 Jun 2026 21:39:00 +0200
Subject: [PATCH] improve contact form collapse

---
 src/components/Section.tsx    | 6 +++---
 src/pages/Contact/Contact.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Section.tsx b/src/components/Section.tsx
index 63ca9b4..d3de525 100644
--- a/src/components/Section.tsx
+++ b/src/components/Section.tsx
@@ -14,13 +14,13 @@ const Section = ({ title, smallTitle, description, children }: IProps) => {
 
 	return (
 		<section className="mx-auto mt-8 grid max-w-5xl place-items-center gap-4 p-8 text-center md:grid-cols-3 md:text-left text-(--accent)">
-			<h3 className="md:col-span-3 mb-4 text-center text-lg font-bold tracking-wider text-primary">
+			<h3 className="col-span-full mb-4 text-center text-lg font-bold tracking-wider text-primary">
 				{smallTitle}
 			</h3>
-			<h4 className="md:col-span-3 mb-4 text-center text-4xl font-extrabold text-(--neutral-content) md:text-5xl">
+			<h4 className="col-span-full mb-4 text-center text-4xl font-extrabold text-(--neutral-content) md:text-5xl">
 				{mainTitle} <span className="text-(--accent)">{lastWord}</span>
 			</h4>
-			<p className="md:col-span-3 mb-8 w-1/2 text-center font-semibold text-(--neutral-content) ">
+			<p className="col-span-full mb-8 w-1/2 text-center font-semibold text-(--neutral-content) ">
 				{description}
 			</p>
 			{children}
diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
index 22ee876..e26e42e 100644
--- a/src/pages/Contact/Contact.tsx
+++ b/src/pages/Contact/Contact.tsx
@@ -65,7 +65,7 @@ const Contact = ({ handleSubmit }: IProps) => {
 			>
 				<form
 					action={formAction}
-					className="col-span-3 flex flex-col gap-6 w-full max-w-(--breakpoint-sm)"
+					className="col-span-full max-w-150 flex flex-col gap-6 w-full"
 				>
 					<FormField
 						type="text"
@@ -98,7 +98,7 @@ const Contact = ({ handleSubmit }: IProps) => {
 					<button
 						type="submit"
 						disabled={isPending}
-						className="btn btn-primary flex items-center justify-center gap-2"
+						className="btn btn-primary flex items-center justify-center gap-2 w-full"
 					>
 						{isPending ? "Sending..." : "Send"}
 						<LuSend className="w-5 h-5" />