From 5cbec23d5e0dc153864a29405c499b5f3dad7466 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 10 Nov 2023 18:43:48 +0530
Subject: [PATCH] fix: cycle card title responsiveness added (#2752)

---
 web/components/cycles/cycles-board-card.tsx | 52 ++++++++++-----------
 1 file changed, 25 insertions(+), 27 deletions(-)

diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
index b9398c4a7..7de04172f 100644
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/cycles-board-card.tsx
@@ -152,34 +152,32 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
 
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
         <a className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px]  text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
-          <div>
-            <div className="flex items-center justify-between gap-2">
-              <div className="flex items-center gap-3">
-                <span className="flex-shrink-0">
-                  <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-3 truncate">
+              <span className="flex-shrink-0">
+                <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />
+              </span>
+              <Tooltip tooltipContent={cycle.name} position="top">
+                <span className="text-base font-medium truncate">{cycle.name}</span>
+              </Tooltip>
+            </div>
+            <div className="flex items-center gap-2">
+              {currentCycle && (
+                <span
+                  className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
+                  style={{
+                    color: currentCycle.color,
+                    backgroundColor: `${currentCycle.color}20`,
+                  }}
+                >
+                  {currentCycle.value === "current"
+                    ? `${findHowManyDaysLeft(cycle.end_date ?? new Date())} ${currentCycle.label}`
+                    : `${currentCycle.label}`}
                 </span>
-                <Tooltip tooltipContent={cycle.name} position="top">
-                  <span className="text-base font-medium truncate">{cycle.name}</span>
-                </Tooltip>
-              </div>
-              <div className="flex items-center gap-2">
-                {currentCycle && (
-                  <span
-                    className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
-                    style={{
-                      color: currentCycle.color,
-                      backgroundColor: `${currentCycle.color}20`,
-                    }}
-                  >
-                    {currentCycle.value === "current"
-                      ? `${findHowManyDaysLeft(cycle.end_date ?? new Date())} ${currentCycle.label}`
-                      : `${currentCycle.label}`}
-                  </span>
-                )}
-                <button onClick={openCycleOverview}>
-                  <Info className="h-4 w-4 text-custom-text-400" />
-                </button>
-              </div>
+              )}
+              <button onClick={openCycleOverview}>
+                <Info className="h-4 w-4 text-custom-text-400" />
+              </button>
             </div>
           </div>