From e6c7bcf7f4c1fd513bbfe15b9d2bb037809e0bb6 Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Wed, 11 Mar 2026 18:48:12 +0300
Subject: [PATCH] fix: auto-resize textareas + dark scrollbar in admin editors

Textareas auto-grow with content and on window resize, no scrollbar
or resize handle needed. Added dark admin scrollbar styles for cases
where overflow is needed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/admin/_components/FormField.tsx | 25 ++++++++++++++++++++++++-
 src/app/globals.css                     | 24 ++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/app/admin/_components/FormField.tsx b/src/app/admin/_components/FormField.tsx
index cea629d..5c67cf8 100644
--- a/src/app/admin/_components/FormField.tsx
+++ b/src/app/admin/_components/FormField.tsx
@@ -1,3 +1,5 @@
+import { useRef, useEffect } from "react";
+
 interface InputFieldProps {
   label: string;
   value: string;
@@ -42,15 +44,36 @@ export function TextareaField({
   placeholder,
   rows = 3,
 }: TextareaFieldProps) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = el.scrollHeight + "px";
+  }, [value]);
+
+  useEffect(() => {
+    function onResize() {
+      const el = ref.current;
+      if (!el) return;
+      el.style.height = "auto";
+      el.style.height = el.scrollHeight + "px";
+    }
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
   return (
     <div>
       <label className="block text-sm text-neutral-400 mb-1.5">{label}</label>
       <textarea
+        ref={ref}
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
         rows={rows}
-        className="w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white placeholder-neutral-500 outline-none focus:border-gold transition-colors resize-y"
+        className="w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white placeholder-neutral-500 outline-none focus:border-gold transition-colors resize-none overflow-hidden"
       />
     </div>
   );
diff --git a/src/app/globals.css b/src/app/globals.css
index fd69f65..3c4c57f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -59,3 +59,27 @@ body {
 .scrollbar-hide::-webkit-scrollbar {
   display: none;
 }
+
+/* ===== Admin dark scrollbar ===== */
+
+.admin-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+}
+
+.admin-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.admin-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.admin-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 3px;
+}
+
+.admin-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}