From 88fca3c67cd2e1154f9a4ff7cae336356cdaba97 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 7 Mar 2023 20:27:16 +0530
Subject: [PATCH] fix: ui fixes (#392)

* fix: ui fixes

* chore: kanban issue title length
---
 .../components/core/board-view/all-boards.tsx |  2 +-
 .../core/board-view/single-board.tsx          |  2 +-
 .../core/board-view/single-issue.tsx          | 10 +++---
 .../modules/sidebar-select/select-lead.tsx    |  5 +--
 .../modules/sidebar-select/select-members.tsx |  2 ++
 .../components/ui/custom-search-select.tsx    | 34 ++++++++++++++++---
 6 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx
index f8ab8ff7f..b81c3238f 100644
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/apps/app/components/core/board-view/all-boards.tsx
@@ -40,7 +40,7 @@ export const AllBoards: React.FC<Props> = ({
     <>
       {groupedByIssues ? (
         <div className="h-[calc(100vh-157px)] w-full lg:h-[calc(100vh-115px)]">
-          <div className="flex h-full gap-x-9 overflow-x-auto horizontal-scroll-enable overflow-y-hidden">
+          <div className="horizontal-scroll-enable flex h-full gap-x-4 overflow-x-auto overflow-y-hidden">
             {Object.keys(groupedByIssues).map((singleGroup, index) => {
               const currentState =
                 selectedGroup === "state_detail.name"
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index d1d3154c5..02efb9e73 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -104,7 +104,7 @@ export const SingleBoard: React.FC<Props> = ({
                   <div
                     className={`absolute ${
                       snapshot.isDraggingOver ? "block" : "hidden"
-                    } pointer-events-none top-0 left-0 z-[99999998] h-full w-full bg-indigo-200 opacity-50`}
+                    } pointer-events-none top-0 left-0 z-[99999998] h-full w-full bg-gray-100 opacity-50`}
                   />
                   <div
                     className={`absolute ${
diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 1239da0d4..bee7b7797 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -24,7 +24,7 @@ import {
   ViewStateSelect,
 } from "components/issues/view-select";
 // ui
-import { ContextMenu, CustomMenu } from "components/ui";
+import { ContextMenu, CustomMenu, Tooltip } from "components/ui";
 // icons
 import {
   ClipboardDocumentCheckIcon,
@@ -33,7 +33,7 @@ import {
   TrashIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import {
   CycleIssueResponse,
@@ -265,12 +265,12 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 className="text-sm group-hover:text-theme"
                 style={{ lineClamp: 3, WebkitLineClamp: 3 }}
               >
-                {issue.name}
+                {truncateText(issue.name, 100)}
               </h5>
             </a>
           </Link>
           <div className="relative mt-2.5 flex flex-wrap items-center gap-2 text-xs">
-            {properties.priority && selectedGroup !== "priority" && (
+            {properties.priority && (
               <ViewPrioritySelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
@@ -278,7 +278,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 selfPositioned
               />
             )}
-            {properties.state && selectedGroup !== "state_detail.name" && (
+            {properties.state && (
               <ViewStateSelect
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
diff --git a/apps/app/components/modules/sidebar-select/select-lead.tsx b/apps/app/components/modules/sidebar-select/select-lead.tsx
index ebdb028fb..bf45f614e 100644
--- a/apps/app/components/modules/sidebar-select/select-lead.tsx
+++ b/apps/app/components/modules/sidebar-select/select-lead.tsx
@@ -10,7 +10,7 @@ import projectService from "services/project.service";
 // ui
 import { Avatar, CustomSearchSelect } from "components/ui";
 // icons
-import { UserCircleIcon, UserIcon } from "@heroicons/react/24/outline";
+import { UserCircleIcon } from "@heroicons/react/24/outline";
 import User from "public/user.png";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
@@ -54,7 +54,6 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
 
   return (
     <div className="flex items-center justify-start gap-1">
-
       <div className="flex w-40 items-center justify-start gap-2">
         <UserCircleIcon className="h-5 w-5 text-gray-400" />
         <span>Lead</span>
@@ -85,6 +84,8 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
             </div>
           }
           options={options}
+          height="md"
+          position="right"
           onChange={onChange}
         />
       </div>
diff --git a/apps/app/components/modules/sidebar-select/select-members.tsx b/apps/app/components/modules/sidebar-select/select-members.tsx
index f0bf0c28a..ba00f3246 100644
--- a/apps/app/components/modules/sidebar-select/select-members.tsx
+++ b/apps/app/components/modules/sidebar-select/select-members.tsx
@@ -71,6 +71,8 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
           }
           options={options}
           onChange={onChange}
+          height="md"
+          position="right"
           multiple
         />
       </div>
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index a90ca973a..8121405eb 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -15,6 +15,7 @@ type CustomSearchSelectProps = {
   }[];
   label?: string | JSX.Element;
   textAlignment?: "left" | "center" | "right";
+  height?: "sm" | "md" | "rg" | "lg";
   position?: "right" | "left";
   noChevron?: boolean;
   customButton?: JSX.Element;
@@ -28,6 +29,7 @@ type CustomSearchSelectProps = {
 export const CustomSearchSelect = ({
   label,
   textAlignment,
+  height = "sm",
   value,
   onChange,
   options,
@@ -95,7 +97,7 @@ export const CustomSearchSelect = ({
                 <Combobox.Options
                   className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
                     position === "right" ? "right-0" : "left-0"
-                  } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
+                  } z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
                 >
                   <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-gray-100 px-2">
                     <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
@@ -106,7 +108,19 @@ export const CustomSearchSelect = ({
                       displayValue={(assigned: any) => assigned?.name}
                     />
                   </div>
-                  <div className="mt-2 space-y-1">
+                  <div
+                    className={`mt-2 space-y-1 ${
+                      height === "sm"
+                        ? "max-h-28"
+                        : height === "md"
+                        ? "max-h-44"
+                        : height === "rg"
+                        ? "max-h-56"
+                        : height === "lg"
+                        ? "max-h-80"
+                        : ""
+                    } overflow-y-scroll`}
+                  >
                     {filteredOptions ? (
                       filteredOptions.length > 0 ? (
                         filteredOptions.map((option) => (
@@ -192,7 +206,7 @@ export const CustomSearchSelect = ({
                 <Combobox.Options
                   className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
                     position === "right" ? "right-0" : "left-0"
-                  } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
+                  } z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
                 >
                   <div className="flex w-full items-center justify-start rounded-sm border bg-gray-100 px-2 text-gray-500">
                     <MagnifyingGlassIcon className="h-3 w-3" />
@@ -203,7 +217,19 @@ export const CustomSearchSelect = ({
                       displayValue={(assigned: any) => assigned?.name}
                     />
                   </div>
-                  <div className="mt-2 space-y-1">
+                  <div
+                    className={`mt-2 space-y-1 ${
+                      height === "sm"
+                        ? "max-h-28"
+                        : height === "md"
+                        ? "max-h-44"
+                        : height === "rg"
+                        ? "max-h-56"
+                        : height === "lg"
+                        ? "max-h-80"
+                        : ""
+                    } overflow-y-scroll`}
+                  >
                     {filteredOptions ? (
                       filteredOptions.length > 0 ? (
                         filteredOptions.map((option) => (