From 35419221c72a3208ef09cda42836f02405a5abd2 Mon Sep 17 00:00:00 2001
From: Max <maxharz@gmail.com>
Date: Wed, 2 Apr 2025 01:28:58 +0200
Subject: [PATCH] fix(content): smaller contact form image (#308)

* Downsize contact form image and change its position

* Fix linting

* Increase space for contact form
---
 docs/.vuepress/components/ContactForm.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/.vuepress/components/ContactForm.vue b/docs/.vuepress/components/ContactForm.vue
index 1579305..b255f22 100644
--- a/docs/.vuepress/components/ContactForm.vue
+++ b/docs/.vuepress/components/ContactForm.vue
@@ -4,18 +4,20 @@
     <strong>Ulf Gebhardt</strong> für deine Fragen gerne zur Verfügung.
   </p>
 
-  <div class="grid grid-cols-1 md:grid-cols-5 gap-8">
-    <!-- Left side: Portrait - takes 2/5 of space -->
-    <div class="flex flex-col items-center md:items-start md:self-start md:col-span-2">
+  <div class="grid grid-cols-1 md:grid-cols-10 gap-8">
+    <!-- Left side: Portrait - takes 3/10 of space -->
+    <div
+      class="flex flex-col items-center md:items-end md:self-start md:col-span-3 md:sticky md:top-8"
+    >
       <img
         src="/images/portrait/ulf-gebhardt.jpg"
         alt="Ulf Gebhardt"
-        class="rounded-lg shadow-md w-97 h-auto mb-6"
+        class="rounded-lg shadow-md w-75 h-auto mb-6"
       />
     </div>
 
-    <!-- Right side: Contact form - takes 3/5 of space -->
-    <div class="md:col-span-3">
+    <!-- Right side: Contact form - takes 7/10 of space -->
+    <div class="md:col-span-7">
       <h3 class="mb-4">Telefon</h3>
       <div class="flex-col gap-2 mb-8">
         <p class="flex items-center">