improve contact form layout

.changeset/metal-moose-sin.md

@@ -0,0 +1,5 @@
+---
+"homepage": patch
+---
+
+improve contact form layout

src/components/Contact/ContactForm.astro

@@ -12,7 +12,7 @@ import FormFields from "./FormFields.astro";
   id="contact-form"
   transition:name="contact-form"
   method="POST"
-  class="mx-auto w-full space-y-12 rounded-xl border bg-background p-12 md:w-[600px] lg:max-w-screen-lg"
+  class="mx-auto flex w-full flex-col gap-10 rounded-xl border bg-background p-6 md:w-[600px] lg:max-w-screen-lg lg:p-12"
 >
   <input {...getActionProps(actions.contact)} />
   <H1 title="Send Me a Message" />
@@ -21,7 +21,13 @@ import FormFields from "./FormFields.astro";
 
   <FormFields />
 
-  <AppLink id="submit-message" as="button" type="submit" disabled>
+  <AppLink
+    id="submit-message"
+    as="button"
+    type="submit"
+    disabled
+    class="self-start"
+  >
     Send <PaperPlane />
   </AppLink>
 </form>

src/pages/contact.astro

@@ -7,7 +7,7 @@ export const prerender = false;
 
 <Layout title="Contact Me">
   <section
-    class="flex min-h-screen-less-header w-full flex-col justify-center p-1"
+    class="flex min-h-screen-less-header w-full flex-col justify-center p-3"
   >
     <ContactForm />
   </section>