From 56e87eda4db316f7db9297a8dd76d85af816cdb5 Mon Sep 17 00:00:00 2001
From: kamycoding <kamy.codes@gmail.com>
Date: Tue, 11 Aug 2026 22:59:59 +0200
Subject: [PATCH] fix: improve contact form input behavior

---
 .../pages/home/sections/contact/contact.css   | 19 +++++++++++++++----
 .../pages/home/sections/contact/contact.html  |  1 +
 .../pages/home/sections/contact/contact.ts    | 13 +++++++++++++
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/app/pages/home/sections/contact/contact.css b/src/app/pages/home/sections/contact/contact.css
index 472c771..01feeb7 100644
--- a/src/app/pages/home/sections/contact/contact.css
+++ b/src/app/pages/home/sections/contact/contact.css
@@ -11,7 +11,7 @@
   --contact-field-error-line: 17px;
 
   display: grid;
-  grid-template-rows: auto 8px 22px var(--contact-field-error-line);
+  grid-template-rows: auto 8px minmax(22px, auto) var(--contact-field-error-line);
   padding: 16px 24px 0;
   border-bottom: 1px solid var(--color-secondary);
 }
@@ -26,7 +26,9 @@
 
 .contact-field :is(input, textarea) {
   grid-row: 3;
+  box-sizing: border-box;
   width: 100%;
+  max-width: 100%;
   height: 22px;
   margin: 0;
   padding: 0;
@@ -39,10 +41,19 @@
   line-height: 1.2;
 }
 
-.contact-field input::placeholder,
-.contact-field textarea::placeholder {
+::placeholder {
   color: var(--color-foreground);
-  opacity: 1;
+  opacity: 0.65;
+}
+
+:focus::placeholder {
+  opacity: 0;
+}
+
+textarea {
+  min-height: 22px;
+  overflow-wrap: anywhere;
+  resize: vertical;
 }
 
 .contact-field:focus-within {
diff --git a/src/app/pages/home/sections/contact/contact.html b/src/app/pages/home/sections/contact/contact.html
index 8bfc2ac..6b9302f 100644
--- a/src/app/pages/home/sections/contact/contact.html
+++ b/src/app/pages/home/sections/contact/contact.html
@@ -95,6 +95,7 @@
             maxlength="2000"
             rows="1"
             [placeholder]="'contact.fields.message.placeholder' | translate"
+            (input)="growMessage($event)"
             [attr.aria-invalid]="hasVisibleError('message')"
             [attr.aria-describedby]="hasVisibleError('message') ? 'contact-message-error' : null"
           ></textarea>
diff --git a/src/app/pages/home/sections/contact/contact.ts b/src/app/pages/home/sections/contact/contact.ts
index 4eeb02e..75a2027 100644
--- a/src/app/pages/home/sections/contact/contact.ts
+++ b/src/app/pages/home/sections/contact/contact.ts
@@ -98,6 +98,19 @@ export class Contact {
     return errors?.['maxlength'] ? 'contact.fields.message.maxlength' : '';
   }
 
+  protected growMessage(event: Event): void {
+    const textarea = event.currentTarget as HTMLTextAreaElement;
+
+    if (!textarea.value) {
+      textarea.style.height = '';
+      return;
+    }
+
+    if (textarea.scrollHeight > textarea.clientHeight) {
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }
+
   protected submit(): void {
     if (this.submissionState() === 'submitting') {
       return;