fix: issue sidebar module , cycle and label dropdown fix (#650)

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>
                 ))}

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>
                 ))}

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 && (