fix: replace Input with Textarea in TextAreaComponent for improved user experience and aesthetics (#3228)

* fix: add 'nowheel' class to Textarea component for enhanced user experience in textarea interactions

* refactor: replace Input with Textarea in TextAreaComponent for improved user experience and aesthetics

* refactor: Update TextAreaComponent to dynamically adjust the number of rows based on the content length for improved user experience

* [autofix.ci] apply automated fixes

---------

Co-authored-by: anovazzi1 <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

Diff for: src/frontend/src/components/textAreaComponent/index.tsx

@@ -1,13 +1,12 @@
 import { classNames } from "@/utils/utils";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { EDIT_TEXT_MODAL_TITLE } from "../../constants/constants";
 import { TypeModal } from "../../constants/enums";
 import GenericModal from "../../modals/genericModal";
-import { Case } from "../../shared/components/caseComponent";
 import { TextAreaComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
-import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
 
 export default function TextAreaComponent({
   value,
@@ -28,7 +27,7 @@ export default function TextAreaComponent({
   return (
     <div className={"flex w-full items-center" + (disabled ? "" : "")}>
       <div className="flex w-full items-center gap-3" data-testid={"div-" + id}>
-        <Input
+        <Textarea
           id={id}
           data-testid={id}
           value={value}
@@ -40,7 +39,9 @@ export default function TextAreaComponent({
             editNode ? "input-edit-node" : "",
             password != undefined ? "pr-8" : "",
             "w-full",
+            "resize-none",
           )}
+          rows={Math.min(3, value.split("\n").length)}
           placeholder={"Type something..."}
           onChange={(event) => {
             onChange(event.target.value);

Diff for: src/frontend/src/components/ui/textarea.tsx

@@ -13,7 +13,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <div className="h-full w-full">
         <textarea
           className={cn(
-            "nopan nodelete nodrag noflow textarea-primary",
+            "nopan nodelete nodrag noflow textarea-primary nowheel",
             className,
             password ? "password" : "",
           )}