fix: issue title resizing fix (#300)

* fix: issue title resizing fix

* fix: header ui fix and invalid date label updated

apps/app/components/issues/description-form.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FC, useCallback, useEffect, useMemo } from "react";
 
 import dynamic from "next/dynamic";
 
@@ -7,7 +7,7 @@ import { useForm } from "react-hook-form";
 // lodash
 import debounce from "lodash.debounce";
 // components
-import { Loader, Input } from "components/ui";
+import { Loader, TextArea } from "components/ui";
 const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
   ssr: false,
   loading: () => (
@@ -38,8 +38,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
   userAuth,
 }) => {
   const { setToastAlert } = useToast();
-  const [issueTitleName, setIssueTitleName] = useState("");
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   const {
     handleSubmit,
@@ -106,31 +104,21 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
-  useEffect(() => {
-    if (textareaRef && textareaRef.current) {
-      textareaRef.current.style.height = "0px";
-      const scrollHeight = textareaRef.current.scrollHeight;
-      textareaRef.current.style.height = scrollHeight + "px";
-    }
-  }, [issueTitleName]);
-
   return (
     <div>
-      <textarea
+      <TextArea
         id="name"
         placeholder="Enter issue name"
         name="name"
         value={watch("name")}
-        ref={textareaRef}
         onChange={(e) => {
-          setIssueTitleName(e.target.value);
           setValue("name", e.target.value);
           debounceHandler();
         }}
         required={true}
         className="block px-3 py-2 text-xl
-        w-full overflow-hidden resize-none min-h-10
-        rounded border-none bg-transparent ring-0 focus:ring-1 focus:ring-theme outline-none "
+      w-full overflow-hidden resize-none min-h-10
+      rounded border-none bg-transparent ring-0 focus:ring-1 focus:ring-theme outline-none "
         role="textbox "
       />
       <span>{errors.name ? errors.name.message : null}</span>