fix: ui changes (#297)

* fix: module card height and invalid date

* fix: issue details page title resizing fix

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

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useMemo } from "react";
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import dynamic from "next/dynamic";
 
@@ -38,6 +38,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
   userAuth,
 }) => {
   const { setToastAlert } = useToast();
+  const [issueTitleName, setIssueTitleName] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
   const {
     handleSubmit,
@@ -104,21 +106,32 @@ 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>
-      <Input
+      <textarea
         id="name"
         placeholder="Enter issue name"
         name="name"
         value={watch("name")}
-        autoComplete="off"
+        ref={textareaRef}
         onChange={(e) => {
+          setIssueTitleName(e.target.value);
           setValue("name", e.target.value);
           debounceHandler();
         }}
-        mode="transparent"
-        className="text-xl font-medium"
-        disabled={isNotAllowed}
+        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 "
+        role="textbox "
       />
       <span>{errors.name ? errors.name.message : null}</span>
       <RemirrorRichTextEditor

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

@@ -70,7 +70,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module }) => {
           </CustomMenu>
         </div>
         <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-          <a className="flex flex-col cursor-pointer rounded-md border bg-white p-3 ">
+          <a className="flex flex-col justify-between h-full cursor-pointer rounded-md border bg-white p-3 ">
             <span className="w-3/4 text-ellipsis overflow-hidden">{module.name}</span>
             <div className="mt-4 grid grid-cols-2 gap-2 text-xs md:grid-cols-4">
               <div className="space-y-2">
@@ -89,7 +89,9 @@ 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" />
-                  {renderShortNumericDateFormat(module.target_date ?? "")}
+                  {module.target_date
+                    ? renderShortNumericDateFormat(module?.target_date)
+                    : "Invalid"}
                 </div>
               </div>
               <div className="space-y-2">