fix: module and cycle event propagation (#4280)

web/components/cycles/board/cycles-board-card.tsx

@@ -149,7 +149,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
   const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
 
   return (
-    <div>
+    <div className="relative">
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
         <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
           <div className="flex items-center justify-between gap-2">
@@ -231,7 +231,11 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
               ) : (
                 <span className="text-xs text-custom-text-400">No due date</span>
               )}
-              <div className="z-[5] flex items-center gap-1.5">
+            </div>
+          </div>
+        </div>
+      </Link>
+      <div className="absolute right-4 bottom-3.5 z-[5] flex items-center gap-1.5">
         {isEditingAllowed && (
           <FavoriteStar
             onClick={(e) => {
@@ -245,9 +249,5 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
         <CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
       </div>
     </div>
-          </div>
-        </div>
-      </Link>
-    </div>
   );
 });

web/components/cycles/list/cycles-list-item.tsx

@@ -154,7 +154,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
   const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
 
   return (
-    <>
+    <div className="relative">
       <Link
         href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}
         onClick={(e) => {
@@ -199,6 +199,10 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
               {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
             </div>
           </div>
+          <span className="h-6 w-52 flex-shrink-0" />
+        </div>
+      </Link>
+      <div className="absolute right-5 bottom-8 z-[5] flex items-center gap-1.5">
         <div className="relative flex w-full flex-shrink-0 items-center justify-between gap-2.5 md:w-auto md:flex-shrink-0 md:justify-end">
           {currentCycle && (
             <div
@@ -250,7 +254,6 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
           </div>
         </div>
       </div>
-      </Link>
+    </div>
-    </>
   );
 });

web/components/modules/module-card-item.tsx

@@ -144,6 +144,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     : "0 Issue";
 
   return (
+    <div className="relative">
       <Link href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
         <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
           <div>
@@ -212,7 +213,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               </div>
             </Tooltip>
 
-          <div className="flex items-center justify-between">
+            <div className="flex items-center justify-between py-0.5">
               {isDateValid ? (
                 <>
                   <span className="text-xs text-custom-text-300">
@@ -222,8 +223,11 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               ) : (
                 <span className="text-xs text-custom-text-400">No due date</span>
               )}
-
+            </div>
-            <div className="z-[5] flex items-center gap-1.5">
+          </div>
+        </div>
+      </Link>
+      <div className="absolute right-4 bottom-3.5 z-[5] flex items-center gap-1.5">
         {isEditingAllowed && (
           <FavoriteStar
             onClick={(e) => {
@@ -242,8 +246,5 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
         )}
       </div>
     </div>
-        </div>
-      </div>
-    </Link>
   );
 });

web/components/modules/module-list-item.tsx

@@ -135,7 +135,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
   const completedModuleCheck = moduleDetails.status === "completed";
 
   return (
-    <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 sm:flex-row">
+    <div className="relative">
       <Link
         href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}
         onClick={(e) => {
@@ -143,8 +143,9 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
             openModuleOverview(e);
           }
         }}
-        className="relative flex w-full items-center justify-between gap-3 overflow-hidden"
       >
+        <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 sm:flex-row">
+          <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
             <div className="relative flex w-full items-center gap-3 overflow-hidden">
               <div className="flex items-center gap-4 truncate">
                 <span className="flex-shrink-0">
@@ -170,6 +171,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
                 <Info className="h-4 w-4 text-custom-text-400" />
               </button>
             </div>
+          </div>
+          <span className="h-6 w-52 flex-shrink-0" />
+        </div>
+      </Link>
+      <div className="absolute right-5 bottom-8 z-[5] flex items-center gap-1.5">
         <div className="flex flex-shrink-0 items-center justify-center">
           {moduleStatus && (
             <span
@@ -183,7 +189,6 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
             </span>
           )}
         </div>
-      </Link>
         <div className="relative flex w-full items-center justify-between gap-2.5 sm:w-auto sm:flex-shrink-0 sm:justify-end ">
           <div className="text-xs text-custom-text-300">
             {renderDate && (
@@ -231,5 +236,6 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
           </div>
         </div>
       </div>
+    </div>
   );
 });