From f589635d03a52d1d2868943b844a7a6e5729ece9 Mon Sep 17 00:00:00 2001
From: Christopher <admin@gaion.chat>
Date: Thu, 22 Jan 2026 10:47:44 -0800
Subject: [PATCH] feat: implement AutoTextarea component for dynamic height
 adjustment in text areas

---
 src/app/[handle]/page.tsx       |  3 ++-
 src/app/admin/page.tsx          |  7 +++---
 src/app/globals.css             | 20 +++++++++++++++++
 src/app/page.tsx                |  3 ++-
 src/components/AutoTextarea.tsx | 38 +++++++++++++++++++++++++++++++++
 5 files changed, 66 insertions(+), 5 deletions(-)
 create mode 100644 src/components/AutoTextarea.tsx

diff --git a/src/app/[handle]/page.tsx b/src/app/[handle]/page.tsx
index 16baade..da26774 100644
--- a/src/app/[handle]/page.tsx
+++ b/src/app/[handle]/page.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { ArrowLeftIcon, CalendarIcon, HeartIcon, RepeatIcon, MessageIcon, FlagIcon } from '@/components/Icons';
+import AutoTextarea from '@/components/AutoTextarea';
 
 interface User {
     id: string;
@@ -481,7 +482,7 @@ export default function ProfilePage() {
                                 </div>
                                 <div>
                                     <label style={{ fontSize: '12px', color: 'var(--foreground-tertiary)' }}>Bio</label>
-                                    <textarea
+                                    <AutoTextarea
                                         className="input"
                                         value={profileForm.bio}
                                         onChange={(e) => setProfileForm({ ...profileForm, bio: e.target.value })}
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index d5fd957..a63a721 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
+import AutoTextarea from '@/components/AutoTextarea';
 
 type AdminUser = {
     id: string;
@@ -494,7 +495,7 @@ export default function AdminPage() {
 
                             <div>
                                 <label style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px', display: 'block' }}>Short Description</label>
-                                <textarea
+                                <AutoTextarea
                                     className="input"
                                     value={nodeSettings.description}
                                     onChange={e => setNodeSettings({ ...nodeSettings, description: e.target.value })}
@@ -554,7 +555,7 @@ export default function AdminPage() {
 
                             <div>
                                 <label style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px', display: 'block' }}>Long Description (About)</label>
-                                <textarea
+                                <AutoTextarea
                                     className="input"
                                     value={nodeSettings.longDescription}
                                     onChange={e => setNodeSettings({ ...nodeSettings, longDescription: e.target.value })}
@@ -565,7 +566,7 @@ export default function AdminPage() {
 
                             <div>
                                 <label style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px', display: 'block' }}>Rules</label>
-                                <textarea
+                                <AutoTextarea
                                     className="input"
                                     value={nodeSettings.rules}
                                     onChange={e => setNodeSettings({ ...nodeSettings, rules: e.target.value })}
diff --git a/src/app/globals.css b/src/app/globals.css
index e6f3efa..43c0e8b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1311,4 +1311,24 @@ a.btn-primary:visited {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: var(--radius-full);
+  border: 2px solid var(--background); /* Creates a padding effect */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--border-hover);
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d8da2d3..26a7638 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { useAuth } from '@/lib/contexts/AuthContext';
+import AutoTextarea from '@/components/AutoTextarea';
 
 interface User {
   id: string;
@@ -260,7 +261,7 @@ function Compose({ onPost }: { onPost: (content: string, mediaIds: string[]) =>
 
   return (
     <div className="compose">
-      <textarea
+      <AutoTextarea
         className="compose-input"
         placeholder="What's happening?"
         value={content}
diff --git a/src/components/AutoTextarea.tsx b/src/components/AutoTextarea.tsx
new file mode 100644
index 0000000..f244f32
--- /dev/null
+++ b/src/components/AutoTextarea.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { useEffect, useRef, TextareaHTMLAttributes } from 'react';
+
+export default function AutoTextarea(props: TextareaHTMLAttributes<HTMLTextAreaElement>) {
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    const adjustHeight = () => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+            textarea.style.height = 'auto';
+            textarea.style.height = `${textarea.scrollHeight}px`;
+        }
+    };
+
+    useEffect(() => {
+        adjustHeight();
+    }, [props.value]);
+
+    return (
+        <textarea
+            {...props}
+            ref={textareaRef}
+            // Ensure 1 row minimum and hide scrollbars to prevent jitter
+            rows={props.rows || 1}
+            onInput={(e) => {
+                adjustHeight();
+                props.onInput?.(e);
+            }}
+            style={{
+                ...props.style,
+                resize: 'none',
+                overflow: 'hidden',
+                minHeight: 'auto', // Override specific min-heights if they conflict
+            }}
+        />
+    );
+}