From ba24c31136b8a7be1645e23edb5b84d50e1b7ea1 Mon Sep 17 00:00:00 2001
From: rimar1337 <132627503+rimar1337@users.noreply.github.com>
Date: Tue, 21 Oct 2025 11:13:09 +0700
Subject: [PATCH] AutoGrowTextarea

---
 src/components/Composer.tsx | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/Composer.tsx b/src/components/Composer.tsx
index a16474c..f1e6256 100644
--- a/src/components/Composer.tsx
+++ b/src/components/Composer.tsx
@@ -1,6 +1,6 @@
 import { RichText } from "@atproto/api";
 import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { useAuth } from "~/providers/UnifiedAuthProvider";
 import { composerAtom } from "~/utils/atoms";
@@ -186,8 +186,8 @@ export function Composer() {
             <div className="flex w-full gap-1 flex-col">
               <ProfileThing agent={agent} large/>
               <div className="flex pl-[50px]">
-                <textarea
-                  className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white"
+                <AutoGrowTextarea
+                  className="w-full text-lg bg-transparent focus:outline-none resize-none placeholder:text-gray-500 text-black dark:text-white pb-2"
                   rows={5}
                   placeholder={getPlaceholder()}
                   value={postText}
@@ -222,4 +222,25 @@ export function Composer() {
       </div>
     </div>
   );
+}
+
+function AutoGrowTextarea({ value, className, onChange, ...props }: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>) {
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = el.scrollHeight + "px";
+  }, [value]);
+
+  return (
+    <textarea
+      ref={ref}
+      className={className}
+      value={value}
+      onChange={onChange}
+      {...props}
+    />
+  );
 }
\ No newline at end of file
-- 
2.51.2