From e5507651c3e4645d240d143d318a6fa4a14fcdb8 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 31 Mar 2023 16:04:36 +0530
Subject: [PATCH] fix: issue sidebar module , cycle and label dropdown fix
 (#650)

---
 .../issues/sidebar-select/cycle.tsx           | 21 ++++++++++++-------
 .../issues/sidebar-select/module.tsx          |  9 ++++++--
 apps/app/components/issues/sidebar.tsx        |  2 +-
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/apps/app/components/issues/sidebar-select/cycle.tsx b/apps/app/components/issues/sidebar-select/cycle.tsx
index 4dcf16f77..9c72064e2 100644
--- a/apps/app/components/issues/sidebar-select/cycle.tsx
+++ b/apps/app/components/issues/sidebar-select/cycle.tsx
@@ -9,6 +9,8 @@ import issuesService from "services/issues.service";
 import cyclesService from "services/cycles.service";
 // ui
 import { Spinner, CustomSelect, Tooltip } from "components/ui";
+// helper
+import { truncateText } from "helpers/string.helper";
 // icons
 import { CyclesIcon } from "components/icons";
 // types
@@ -65,13 +67,15 @@ export const SidebarCycleSelect: React.FC<Props> = ({
       <div className="space-y-1 sm:basis-1/2">
         <CustomSelect
           label={
-            <span
-              className={`w-full max-w-[125px] truncate text-left sm:block ${
-                issueCycle ? "" : "text-gray-900"
-              }`}
-            >
-              {issueCycle ? issueCycle.cycle_detail.name : "None"}
-            </span>
+            <Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : ""}`}>
+              <span
+                className={`w-full max-w-[125px] truncate text-left sm:block ${
+                  issueCycle ? "" : "text-gray-900"
+                }`}
+              >
+                {issueCycle ? truncateText(issueCycle.cycle_detail.name, 15) : "None"}
+              </span>
+            </Tooltip>
           }
           value={issueCycle?.cycle_detail.id}
           onChange={(value: any) => {
@@ -81,6 +85,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
           }}
           width="w-full"
           position="right"
+          maxHeight="rg"
           disabled={isNotAllowed}
         >
           {incompleteCycles ? (
@@ -89,7 +94,7 @@ export const SidebarCycleSelect: React.FC<Props> = ({
                 {incompleteCycles.map((option) => (
                   <CustomSelect.Option key={option.id} value={option.id}>
                     <Tooltip position="left-bottom" tooltipContent={option.name}>
-                      <span className="w-full max-w-[125px] truncate ">{option.name}</span>
+                      <span className="w-full truncate ">{truncateText(option.name, 15)}</span>
                     </Tooltip>
                   </CustomSelect.Option>
                 ))}
diff --git a/apps/app/components/issues/sidebar-select/module.tsx b/apps/app/components/issues/sidebar-select/module.tsx
index d860d0583..501b59df7 100644
--- a/apps/app/components/issues/sidebar-select/module.tsx
+++ b/apps/app/components/issues/sidebar-select/module.tsx
@@ -8,6 +8,8 @@ import useSWR, { mutate } from "swr";
 import modulesService from "services/modules.service";
 // ui
 import { Spinner, CustomSelect, Tooltip } from "components/ui";
+// helper
+import { truncateText } from "helpers/string.helper";
 // icons
 import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 // types
@@ -64,13 +66,15 @@ export const SidebarModuleSelect: React.FC<Props> = ({
       <div className="space-y-1 sm:basis-1/2">
         <CustomSelect
           label={
+            <Tooltip position="left" tooltipContent={`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}`}>
             <span
               className={`w-full max-w-[125px] truncate text-left sm:block ${
                 issueModule ? "" : "text-gray-900"
               }`}
             >
-              {modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}
+              {truncateText(`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "None"}`, 15)}
             </span>
+            </Tooltip>
           }
           value={issueModule?.module_detail?.id}
           onChange={(value: any) => {
@@ -80,6 +84,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
           }}
           width="w-full"
           position="right"
+          maxHeight="rg"
           disabled={isNotAllowed}
         >
           {modules ? (
@@ -88,7 +93,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
                 {modules.map((option) => (
                   <CustomSelect.Option key={option.id} value={option.id}>
                     <Tooltip position="left-bottom" tooltipContent={option.name}>
-                      <span className="w-full max-w-[125px] truncate">{option.name}</span>
+                      <span className="w-full max-w-[125px] truncate">{truncateText(option.name, 15)}</span>
                     </Tooltip>
                   </CustomSelect.Option>
                 ))}
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index 79ad4cc44..d39b4158a 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -598,7 +598,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
             </form>
           )}
         </div>
-        <div className="py-1 text-xs">
+        <div className="min-h-[116px] py-1 text-xs">
           <div className="flex items-center justify-between gap-2">
             <h4>Links</h4>
             {!isNotAllowed && (