fix: ui improvements

apps/app/components/core/board-view/single-board.tsx

@@ -72,7 +72,7 @@ export const SingleBoard: React.FC<Props> = ({
 
   return (
     <div className={`h-full flex-shrink-0 rounded ${!isCollapsed ? "" : "w-80 border bg-gray-50"}`}>
-      <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3 overflow-y-auto"}`}>
+      <div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3"}`}>
         <BoardHeader
           addIssueToState={addIssueToState}
           bgColor={bgColor}
@@ -86,7 +86,7 @@ export const SingleBoard: React.FC<Props> = ({
         <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
           {(provided, snapshot) => (
             <div
-              className={`relative mt-3 h-full px-3 pb-3 ${
+              className={`relative mt-3 h-full px-3 pb-3 overflow-y-auto  ${
                 snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
               } ${!isCollapsed ? "hidden" : "block"}`}
               ref={provided.innerRef}

apps/app/components/cycles/single-cycle-card.tsx

@@ -87,7 +87,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = (props) => {
       <div className="rounded-md border bg-white p-3">
         <div className="grid grid-cols-9 gap-2 divide-x">
           <div className="col-span-3 flex flex-col space-y-3">
-            <div className="flex items-center justify-between gap-2">
+            <div className="flex items-start justify-between gap-2">
               <Link href={`/${workspaceSlug}/projects/${projectId as string}/cycles/${cycle.id}`}>
                 <a>
                   <h2 className="font-medium w-full max-w-[175px] lg:max-w-[225px] xl:max-w-[300px]  text-ellipsis overflow-hidden">

apps/app/components/emoji-icon-picker/index.tsx

@@ -59,7 +59,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
         leaveTo="transform opacity-0 scale-95"
       >
         <Popover.Panel className="absolute z-10 mt-2 w-80 rounded-md bg-white shadow-lg">
-          <div className="h-80 w-80 overflow-auto rounded border bg-white p-2 shadow-2xl">
+          <div className="h-72 w-80 overflow-auto rounded border bg-white p-2 shadow-2xl">
             <Tab.Group as="div" className="flex h-full w-full flex-col">
               <Tab.List className="flex-0 -mx-2 flex justify-around gap-1 rounded border-b p-1">
                 {tabOptions.map((tab) => (

apps/app/components/issues/my-issues-list-item.tsx

@@ -15,7 +15,7 @@ import {
 } from "components/issues/view-select";
 // ui
 import { AssigneesList } from "components/ui/avatar";
-import { CustomMenu } from "components/ui";
+import { CustomMenu, Tooltip } from "components/ui";
 // types
 import { IIssue, Properties } from "types";
 // fetch-keys
@@ -78,13 +78,20 @@ export const MyIssuesListItem: React.FC<Props> = ({
         <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
           <a className="group relative flex items-center gap-2">
             {properties?.key && (
-              <span className="flex-shrink-0 text-xs text-gray-500">
-                {issue.project_detail?.identifier}-{issue.sequence_id}
-              </span>
+              <Tooltip
+                tooltipHeading="ID"
+                tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
+              >
+                <span className="flex-shrink-0 text-xs text-gray-500">
+                  {issue.project_detail?.identifier}-{issue.sequence_id}
+                </span>
+              </Tooltip>
             )}
-            <span className="w-[275px] md:w-[450px] lg:w-[600px] text-ellipsis overflow-hidden whitespace-nowrap">
-              {issue.name}
-            </span>
+            <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+              <span className="w-auto max-w-lg text-ellipsis overflow-hidden whitespace-nowrap">
+                {issue.name}
+              </span>
+            </Tooltip>
           </a>
         </Link>
       </div>
@@ -134,9 +141,23 @@ export const MyIssuesListItem: React.FC<Props> = ({
           </div>
         )}
         {properties.assignee && (
-          <div className="flex items-center gap-1">
-            <AssigneesList userIds={issue.assignees ?? []} />
-          </div>
+          <Tooltip
+            position="top-right"
+            tooltipHeading="Assignees"
+            tooltipContent={
+              issue.assignee_details.length > 0
+                ? issue.assignee_details
+                    .map((assignee) =>
+                      assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
+                    )
+                    .join(", ")
+                : "No Assignee"
+            }
+          >
+            <div className="flex items-center gap-1">
+              <AssigneesList userIds={issue.assignees ?? []} />
+            </div>
+          </Tooltip>
         )}
         <CustomMenu width="auto" ellipsis>
           <CustomMenu.MenuItem onClick={handleDeleteIssue}>Delete permanently</CustomMenu.MenuItem>

apps/app/components/issues/view-select/assignee.tsx

@@ -57,6 +57,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
         <div>
           <Listbox.Button>
             <Tooltip
+              position="top-right"
               tooltipHeading="Assignees"
               tooltipContent={
                 issue.assignee_details.length > 0

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

@@ -2,12 +2,14 @@ import React, { useState } from "react";
 
 import Link from "next/link";
 import { useRouter } from "next/router";
+import Image from "next/image";
 
 // components
 import { DeleteModuleModal } from "components/modules";
 // ui
 import { AssigneesList, Avatar, CustomMenu } from "components/ui";
 // icons
+import User from "public/user.png";
 import { CalendarDaysIcon } from "@heroicons/react/24/outline";
 // helpers
 import { renderShortNumericDateFormat } from "helpers/date-time.helper";
@@ -67,24 +69,52 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
           </CustomMenu>
         </div>
         <Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
-          <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>
+          <a className="flex flex-col justify-between h-full cursor-default rounded-md border bg-white p-3 ">
+            <span className="w-3/4 text-ellipsis cursor-pointer 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">
+              <div className="space-y-2 ">
                 <h6 className="text-gray-500">LEAD</h6>
                 <div>
-                  <Avatar user={module.lead_detail} />
+                  {module.lead_detail ? (
+                    <Avatar user={module.lead_detail} />
+                  ) : (
+                    <div className="flex items-center gap-1">
+                      <Image
+                        src={User}
+                        height="16px"
+                        width="16px"
+                        className="rounded-full"
+                        alt="N/A"
+                      />
+                      <span>N/A</span>
+                    </div>
+                  )}
                 </div>
               </div>
               <div className="space-y-2">
                 <h6 className="text-gray-500">MEMBERS</h6>
-                <div className="flex items-center gap-1 text-xs">
-                  <AssigneesList users={module.members_detail} />
+                <div className="flex  items-center gap-1 text-xs">
+                  {module.members_detail && module.members_detail.length > 0 ? (
+                    <AssigneesList users={module.members_detail} length={3} />
+                  ) : (
+                    <div className="flex items-center gap-1">
+                      <Image
+                        src={User}
+                        height="16px"
+                        width="16px"
+                        className="rounded-full"
+                        alt="N/A"
+                      />
+                      <span>N/A</span>
+                    </div>
+                  )}
                 </div>
               </div>
               <div className="space-y-2">
                 <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">
+                <div className="flex w-min 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) : "N/A"}
                 </div>

apps/app/components/project/confirm-project-deletion.tsx

@@ -122,12 +122,12 @@ const ConfirmProjectDeletion: React.FC<TConfirmProjectDeletionProps> = (props) =
                         aria-hidden="true"
                       />
                     </div>
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
                         Delete Project
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-gray-500">
+                        <p className="text-sm text-gray-500 break-all">
                           Are you sure you want to delete project - {`"`}
                           <span className="italic">{selectedProject?.name}</span>
                           {`"`} ? All of the data related to the project will be permanently
@@ -136,7 +136,7 @@ const ConfirmProjectDeletion: React.FC<TConfirmProjectDeletionProps> = (props) =
                       </div>
                       <div className="my-3 h-0.5 bg-gray-200" />
                       <div className="mt-3">
-                        <p className="text-sm">
+                        <p className="text-sm break-all">
                           Enter the project name{" "}
                           <span className="font-semibold">{selectedProject?.name}</span> to
                           continue:

apps/app/components/ui/tooltip.tsx

@@ -5,9 +5,25 @@ import { Tooltip2 } from "@blueprintjs/popover2";
 type Props = {
   tooltipHeading?: string;
   tooltipContent: string;
-  position?: "top" | "right" | "bottom" | "left";
+  position?:
+    | "top"
+    | "right"
+    | "bottom"
+    | "left"
+    | "auto"
+    | "auto-end"
+    | "auto-start"
+    | "bottom-left"
+    | "bottom-right"
+    | "left-bottom"
+    | "left-top"
+    | "right-bottom"
+    | "right-top"
+    | "top-left"
+    | "top-right";
   children: JSX.Element;
   disabled?: boolean;
+  className?: string;
 };
 
 export const Tooltip: React.FC<Props> = ({
@@ -16,11 +32,14 @@ export const Tooltip: React.FC<Props> = ({
   position = "top",
   children,
   disabled = false,
+  className = "",
 }) => (
   <Tooltip2
     disabled={disabled}
     content={
-      <div className="flex flex-col justify-center items-start gap-1 max-w-[600px] text-xs rounded-md bg-white p-2 shadow-md capitalize text-left">
+      <div
+        className={`flex flex-col justify-center items-start gap-1 max-w-[600px] text-xs rounded-md bg-white p-2 shadow-md capitalize text-left ${className}`}
+      >
         {tooltipHeading ? (
           <>
             <h5 className="font-medium">{tooltipHeading}</h5>