From 13b2240894611a1171a2aa5ded0ca9c9bf9d8581 Mon Sep 17 00:00:00 2001
From: kamycoding <kamy.codes@gmail.com>
Date: Tue, 11 Aug 2026 20:28:19 +0200
Subject: [PATCH] fix: prevent contact validation layout shift

---
 .../pages/home/sections/contact/contact.css   | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/app/pages/home/sections/contact/contact.css b/src/app/pages/home/sections/contact/contact.css
index 865c406..472c771 100644
--- a/src/app/pages/home/sections/contact/contact.css
+++ b/src/app/pages/home/sections/contact/contact.css
@@ -8,13 +8,16 @@
 }
 
 .contact-field {
+  --contact-field-error-line: 17px;
+
   display: grid;
-  gap: 8px;
-  padding: 16px 24px;
+  grid-template-rows: auto 8px 22px var(--contact-field-error-line);
+  padding: 16px 24px 0;
   border-bottom: 1px solid var(--color-secondary);
 }
 
 .contact-field label {
+  grid-row: 1;
   font-size: 24px;
   font-weight: 500;
   line-height: 1.2;
@@ -22,6 +25,7 @@
 }
 
 .contact-field :is(input, textarea) {
+  grid-row: 3;
   width: 100%;
   height: 22px;
   margin: 0;
@@ -56,25 +60,13 @@
 }
 
 .contact-field__error {
+  grid-row: 4;
   margin: 0;
   color: var(--color-error);
   font-size: 14px;
   line-height: 1.2;
 }
 
-.contact-field--invalid:has(:placeholder-shown) :is(input, textarea) {
-  grid-area: 2 / 1;
-  z-index: 1;
-}
-
-.contact-field--invalid:has(:placeholder-shown) .contact-field__error {
-  grid-area: 2 / 1;
-}
-
-.contact-field--invalid:has(:placeholder-shown) ::placeholder {
-  color: transparent;
-}
-
 .contact-consent {
   position: relative;
   min-height: 112px;
@@ -218,6 +210,10 @@
     width: 280px;
   }
 
+  .contact-field {
+    --contact-field-error-line: 22px;
+  }
+
   .contact-field__error {
     font-size: 18px;
   }