From 03f32d7dd8b5ee0546eaf263ca409a880a20a30e Mon Sep 17 00:00:00 2001
From: Tanish <tanish2k09.dev@gmail.com>
Date: Fri, 14 Feb 2025 04:30:34 -0800
Subject: [PATCH] Fix resize attribute not working properly on Textareas

---
 frontend/realtime/src/components/ui/TextArea.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/realtime/src/components/ui/TextArea.tsx b/frontend/realtime/src/components/ui/TextArea.tsx
index 753efdabd2..5bd088bb47 100644
--- a/frontend/realtime/src/components/ui/TextArea.tsx
+++ b/frontend/realtime/src/components/ui/TextArea.tsx
@@ -7,10 +7,16 @@ export type ResizeType =
   | "both"
   | "horizontal"
   | "vertical"
-  | "block"
-  | "inline"
   | undefined;
 
+const resizeStyles = {
+  none: "resize-none",
+  both: "resize",
+  horizontal: "resize-x",
+  vertical: "resize-y",
+  undefined: "",
+}
+
 export interface TextareaInterface
   extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   label?: string;
@@ -21,6 +27,9 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaInterface>(
     { className, label, resize = "vertical", id, ...rest }: TextareaInterface,
     ref,
   ) => {
+
+    const resizeStyle = resizeStyles[resize];
+
     return (
       <div className="flex flex-col">
         {label && <label htmlFor={id ? id : kebabCase(label)}>{label}</label>}
@@ -31,11 +40,11 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaInterface>(
           className={twMerge(
             "border-ui-panel-border bg-ui-controls rounded-lg border px-3 py-2",
             className,
+            resizeStyle,
           )}
           style={{
             outline: "2px solid transparent",
             transition: "outline-color 0.15s ease-in-out",
-            resize: resize,
           }}
           onFocus={(e) => {
             // disableHotkeyInput(DomLevels.INPUT);