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>

apps/app/components/modules/single-module-card.tsx

@@ -89,9 +89,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module }) => {
                 <h6 className="text-gray-500">END DATE</h6>
                 <div className="flex w-min cursor-pointer items-center gap-1 whitespace-nowrap rounded border px-1.5 py-0.5 text-xs shadow-sm">
                   <CalendarDaysIcon className="h-3 w-3" />
-                  {module.target_date
-                    ? renderShortNumericDateFormat(module?.target_date)
-                    : "Invalid"}
+                  {module.target_date ? renderShortNumericDateFormat(module?.target_date) : "N/A"}
                 </div>
               </div>
               <div className="space-y-2">

apps/app/layouts/app-layout/app-header.tsx

@@ -11,7 +11,7 @@ type Props = {
 };
 
 const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
-  <div className="flex w-full flex-col gap-y-4 border-b border-gray-200 bg-gray-50 px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
+  <div className="flex w-full flex-row items-center justify-between gap-y-4 border-b border-gray-200 bg-gray-50 px-5 py-4 ">
     <div className="flex items-center gap-2">
       <div className="block md:hidden">
         <Button