From fcb932dc5d67d133940883da8ad941cbe5b93bc9 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 17 Feb 2023 19:58:27 +0530
Subject: [PATCH] fix: issue title resizing fix (#300)

* fix: issue title resizing fix

* fix: header ui fix and invalid date label updated
---
 .../components/issues/description-form.tsx    | 22 +++++--------------
 .../components/modules/single-module-card.tsx |  4 +---
 apps/app/layouts/app-layout/app-header.tsx    |  2 +-
 3 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index e1838bfb8..9b6a50cc6 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/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>
diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx
index 1e85b8e61..312299173 100644
--- a/apps/app/components/modules/single-module-card.tsx
+++ b/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">
diff --git a/apps/app/layouts/app-layout/app-header.tsx b/apps/app/layouts/app-layout/app-header.tsx
index 439db92ba..7a805f2de 100644
--- a/apps/app/layouts/app-layout/app-header.tsx
+++ b/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