fix: task description overflow

aseerkt · Feb 29, 2024 · 3a92c75 · 3a92c75
1 parent 1f47b83
commit 3a92c75
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 41 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,6 @@
 {
   "semi": true,
   "singleQuote": true,
-  "jsxSingleQuote": true
+  "jsxSingleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/package.json b/package.json
@@ -58,6 +58,8 @@
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.1.0",
     "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "prisma": "^5.10.0",
     "tailwindcss": "^3.4.1",
     "ts-node": "^10.9.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/prettier.config.js b/prettier.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins,
+};
diff --git a/src/app/users/[username]/UserTabLayout.tsx b/src/app/users/[username]/UserTabLayout.tsx
@@ -13,7 +13,7 @@ type UserTabLayoutProps = PropsWithChildren<{
 
 const getCurrentSubPath = (pathname: string) => {
   const currentTabIndex = tabRoutes.findIndex((tab) =>
-    tab.pathRegex.test(pathname)
+    tab.pathRegex.test(pathname),
   );
 
   if (currentTabIndex === -1) return null;
@@ -36,7 +36,7 @@ export default function UserTabLayout({
   const currentSubPath = getCurrentSubPath(pathname);
 
   if (!currentSubPath) {
-    return <div className='w-full h-full mx-auto'>{children}</div>;
+    return <div className='mx-auto h-full w-full'>{children}</div>;
   }
 
   return (
@@ -46,15 +46,15 @@ export default function UserTabLayout({
           <Link href={`/users/${params.username}`}>{params.username}</Link>
         }
       />
-      <TabsList className='flex h-12 justify-start px-6 border-b-2'>
+      <TabsList className='flex h-12 justify-start border-b-2 px-6'>
         {tabRoutes.map((tab) => (
           <TabsTrigger key={tab.subPath} value={tab.subPath}>
             {tab.name}
           </TabsTrigger>
         ))}
       </TabsList>
       <TabsContent value={currentSubPath}>
-        <div className='max-w-[1280px] relative w-full h-full flex px-6 mt-3 mx-auto'>
+        <div className='relative mx-auto mt-3 flex h-full w-full max-w-[1280px] px-6'>
           <div className='absolute w-[296px]'>{userSection}</div>
           <div className='ml-[320px] grow'>{children}</div>
         </div>

diff --git a/src/app/users/[username]/projects/[projectName]/(task)/EditTaskDescription.tsx b/src/app/users/[username]/projects/[projectName]/(task)/EditTaskDescription.tsx
@@ -17,8 +17,13 @@ export default function EditTaskDescription({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onEditSubmit)}>
-        <MdEditorField name='description' control={form.control} autoFocus />
+      <form className='pl-1' onSubmit={form.handleSubmit(onEditSubmit)}>
+        <MdEditorField
+          name='description'
+          control={form.control}
+          autoFocus
+          height={350}
+        />
         <div className='flex justify-end gap-2'>
           <Button variant='outline' type='button' onClick={onCancelEdit}>
             Cancel

diff --git a/src/app/users/[username]/projects/[projectName]/(task)/TaskDisplay.tsx b/src/app/users/[username]/projects/[projectName]/(task)/TaskDisplay.tsx
@@ -61,7 +61,7 @@ export default function TaskDisplay({ projectId, taskId }: TaskDisplayProps) {
     mutate,
   } = useSWR<TaskType>(
     `${window.location.origin}/api/tasks/${taskId}`,
-    fetcher
+    fetcher,
   );
   const hasEditAcces = useProjectAccess('WRITE');
 
@@ -95,7 +95,7 @@ export default function TaskDisplay({ projectId, taskId }: TaskDisplayProps) {
           populateCache: true,
           revalidate: false,
           throwOnError: true,
-        }
+        },
       );
     } catch (error) {
       toast({
@@ -111,15 +111,15 @@ export default function TaskDisplay({ projectId, taskId }: TaskDisplayProps) {
       {isLoading && <TaskSkeleton />}
       {task && (
         <>
-          <DialogHeader className='p-6 pt-10 border-b-2'>
+          <DialogHeader className='border-b-2 p-6 pt-10'>
             {editMode === 'TITLE' ? (
               <EditTaskTitle
                 title={task.title}
                 onCancelEdit={handleCancelEdit}
                 onEditSubmit={handleTaskEdit}
               />
             ) : (
-              <DialogTitle className='text-2xl font-bold flex justify-between'>
+              <DialogTitle className='flex justify-between text-2xl font-bold'>
                 <div>
                   <span>{task?.title}</span>
                   <span className='text-gray-400'> #{task.id}</span>
@@ -149,20 +149,35 @@ export default function TaskDisplay({ projectId, taskId }: TaskDisplayProps) {
               created {dayjs(task.createdAt).fromNow()}
             </DialogDescription>
           </DialogHeader>
-          <div className='p-6 grow border-t-2 grid grid-cols-[auto_380px]'>
-            <section className='pr-6 flex flex-col gap-2'>
-              <h4 className='font-semibold border-b-2 mb-3'>
-                Short Description
-              </h4>
+          <div
+            aria-label='dialog-body'
+            className='grid h-full grid-cols-[auto_380px] overflow-y-hidden border-t-2 p-6'
+          >
+            <section className='flex h-full flex-col gap-2 overflow-y-hidden pr-6'>
+              <div className='flex justify-between'>
+                <h4 className='mb-2 font-semibold'>Short Description</h4>
+                {hasEditAcces && (
+                  <Button
+                    size='sm'
+                    variant='link'
+                    className='w-max px-0'
+                    aria-label='edit description button'
+                    disabled={!hasEditAcces}
+                    onClick={handleEditMode('DESCRIPTION')}
+                  >
+                    Edit description
+                  </Button>
+                )}
+              </div>
               {editMode === 'DESCRIPTION' ? (
                 <EditTaskDescription
                   description={task.description}
                   onCancelEdit={handleCancelEdit}
                   onEditSubmit={handleTaskEdit}
                 />
               ) : (
-                <div className=' flex flex-col justify-start grow'>
-                  <div className='grow'>
+                <div className='flex h-full grow flex-col overflow-y-hidden'>
+                  <div className='mb-3 grow overflow-y-auto rounded-md border-2 p-3'>
                     {task.description ? (
                       <Markdown source={task.description} />
                     ) : (
@@ -171,29 +186,15 @@ export default function TaskDisplay({ projectId, taskId }: TaskDisplayProps) {
                       </span>
                     )}
                   </div>
-                  <div className='flex items-center space-x-3'>
-                    {hasEditAcces && (
-                      <Button
-                        size='sm'
-                        variant='link'
-                        className='px-0 w-max'
-                        aria-label='edit description button'
-                        disabled={!hasEditAcces}
-                        onClick={handleEditMode('DESCRIPTION')}
-                      >
-                        Edit description
-                      </Button>
-                    )}
-                    <small className='text-sm text-gray-500'>
-                      updated {dayjs(task.updatedAt).fromNow()}
-                    </small>
-                  </div>
+                  <small className='text-sm text-gray-500'>
+                    updated {dayjs(task.updatedAt).fromNow()}
+                  </small>
                 </div>
               )}
             </section>
-            <section className='flex flex-col'>
+            <section className='mt-10 flex flex-col'>
               <Table>
-                <TableBody>
+                <TableBody className='rounded-md'>
                   <TableRow>
                     <TableHead className='w-[100px]'>Priority</TableHead>
                     <TableCell align='right'>
@@ -225,7 +226,7 @@ export default function TaskDisplay({ projectId, taskId }: TaskDisplayProps) {
                           </SelectContent>
                         </Select>
                       ) : (
-                        <div className='border-2 rounded-md p-2'>
+                        <div className='rounded-md border-2 p-2'>
                           <PriorityOption
                             label={capitalize(task.priority)}
                             value={task.priority}
@@ -241,7 +242,7 @@ export default function TaskDisplay({ projectId, taskId }: TaskDisplayProps) {
                         variant='outline'
                         className={cn(
                           `rounded-full text-sm`,
-                          columnBadgeClassNames[task.column.color]
+                          columnBadgeClassNames[task.column.color],
                         )}
                       >
                         {task.column.label}
@@ -259,7 +260,7 @@ export default function TaskDisplay({ projectId, taskId }: TaskDisplayProps) {
                           disabled={!hasEditAcces}
                         />
                       ) : (
-                        <div className='border-2 flex items-center rounded-md p-2'>
+                        <div className='flex items-center rounded-md border-2 p-2'>
                           {task.assignee?.username ? (
                             <Link
                               className='font-semibold hover:underline'

diff --git a/src/app/users/[username]/projects/[projectName]/(task)/TaskModal.tsx b/src/app/users/[username]/projects/[projectName]/(task)/TaskModal.tsx
@@ -27,7 +27,7 @@ export default function TaskModal({ projectId }: TaskModalProps) {
 
   return (
     <Dialog open={Boolean(taskId)} onOpenChange={handleClose}>
-      <DialogContent className='p-0 max-w-[900px] flex flex-col gap-0 min-h-[550px] w-full'>
+      <DialogContent className='flex h-[650px] w-full max-w-[900px] flex-col gap-0 p-0'>
         {taskId && (
           <Suspense fallback={<TaskSkeleton />}>
             <TaskDisplay projectId={projectId} taskId={taskId} />