From d253933995aaa96546e597bf64236ef07bee7d5b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 26 Sep 2024 16:55:01 +0530
Subject: [PATCH] [WEB-2552] fix: issue list overflow and event propagation
 (#5706)

---
 .../modals/existing-issues-list-modal.tsx     |  6 +--
 .../issues/issue-layouts/list/block.tsx       |  4 ++
 .../issues/relations/issue-list-item.tsx      | 14 +++--
 .../issues/sub-issues/issue-list-item.tsx     | 52 +++++++++++--------
 4 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/web/core/components/core/modals/existing-issues-list-modal.tsx b/web/core/components/core/modals/existing-issues-list-modal.tsx
index 238efb7a9..659dd7bfb 100644
--- a/web/core/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/core/components/core/modals/existing-issues-list-modal.tsx
@@ -249,7 +249,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                                     } ${selected ? "text-custom-text-100" : ""}`
                                   }
                                 >
-                                  <div className="flex items-center gap-2">
+                                  <div className="flex items-center gap-2 truncate">
                                     <input type="checkbox" checked={selected} readOnly />
                                     <span
                                       className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
@@ -266,12 +266,12 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                                         textContainerClassName="text-xs text-custom-text-200"
                                       />
                                     </span>
-                                    {issue.name}
+                                    <span className="truncate">{issue.name}</span>
                                   </div>
                                   <a
                                     href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
                                     target="_blank"
-                                    className="z-1 relative hidden text-custom-text-200 hover:text-custom-text-100 group-hover:block"
+                                    className="z-1 relative hidden flex-shrink-0 text-custom-text-200 hover:text-custom-text-100 group-hover:block"
                                     rel="noopener noreferrer"
                                     onClick={(e) => e.stopPropagation()}
                                   >
diff --git a/web/core/components/issues/issue-layouts/list/block.tsx b/web/core/components/issues/issue-layouts/list/block.tsx
index 267dbd89b..59e7715c3 100644
--- a/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/web/core/components/issues/issue-layouts/list/block.tsx
@@ -271,6 +271,10 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                   "md:flex": isSidebarCollapsed,
                   "lg:flex": !isSidebarCollapsed,
                 })}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
               >
                 {quickActions({
                   issue,
diff --git a/web/core/components/issues/relations/issue-list-item.tsx b/web/core/components/issues/relations/issue-list-item.tsx
index acb8187dc..20bf1e2f0 100644
--- a/web/core/components/issues/relations/issue-list-item.tsx
+++ b/web/core/components/issues/relations/issue-list-item.tsx
@@ -95,12 +95,12 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
         id={`issue-${issue.id}`}
         href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
         onClick={() => handleIssuePeekOverview(issue)}
-        className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+        className="w-full cursor-pointer"
       >
         {issue && (
           <div className="group relative flex min-h-11 h-full w-full items-center gap-3 px-1.5 py-1 transition-all hover:bg-custom-background-90">
             <span className="size-5 flex-shrink-0" />
-            <div className="flex w-full cursor-pointer items-center gap-3">
+            <div className="flex w-full truncate cursor-pointer items-center gap-3">
               <div
                 className="h-2 w-2 flex-shrink-0 rounded-full"
                 style={{
@@ -120,10 +120,16 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
               </div>
 
               <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-                <span>{issue.name}</span>
+                <span className="w-full truncate text-sm text-custom-text-100">{issue.name}</span>
               </Tooltip>
             </div>
-            <div className="flex-shrink-0 text-sm">
+            <div
+              className="flex-shrink-0 text-sm"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
               <RelationIssueProperty
                 workspaceSlug={workspaceSlug}
                 issueId={relationIssueId}
diff --git a/web/core/components/issues/sub-issues/issue-list-item.tsx b/web/core/components/issues/sub-issues/issue-list-item.tsx
index 78241633e..c4486c2ae 100644
--- a/web/core/components/issues/sub-issues/issue-list-item.tsx
+++ b/web/core/components/issues/sub-issues/issue-list-item.tsx
@@ -86,7 +86,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
         id={`issue-${issue.id}`}
         href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
         onClick={() => handleIssuePeekOverview(issue)}
-        className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+        className="w-full cursor-pointer"
       >
         {issue && (
           <div
@@ -104,7 +104,9 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
                   ) : (
                     <div
                       className="flex h-full w-full cursor-pointer items-center justify-center text-custom-text-400 hover:text-custom-text-300"
-                      onClick={async () => {
+                      onClick={async (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
                         if (!subIssueHelpers.issue_visibility.includes(issueId)) {
                           setSubIssueHelpers(parentIssueId, "preview_loader", issueId);
                           await subIssueOperations.fetchSubIssues(workspaceSlug, projectId, issueId);
@@ -125,7 +127,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
               )}
             </div>
 
-            <div className="flex w-full cursor-pointer items-center gap-3">
+            <div className="flex w-full truncate cursor-pointer items-center gap-3">
               <div
                 className="h-2 w-2 flex-shrink-0 rounded-full"
                 style={{
@@ -144,11 +146,17 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
                 )}
               </div>
               <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-                <span>{issue.name}</span>
+                <span className="w-full truncate text-sm text-custom-text-100">{issue.name}</span>
               </Tooltip>
             </div>
 
-            <div className="flex-shrink-0 text-sm">
+            <div
+              className="flex-shrink-0 text-sm"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
               <IssueProperty
                 workspaceSlug={workspaceSlug}
                 parentIssueId={parentIssueId}
@@ -224,24 +232,24 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
             </div>
           </div>
         )}
-
-        {/* should not expand the current issue if it is also the root issue*/}
-        {subIssueHelpers.issue_visibility.includes(issueId) &&
-          issue.project_id &&
-          subIssueCount > 0 &&
-          !isCurrentIssueRoot && (
-            <IssueList
-              workspaceSlug={workspaceSlug}
-              projectId={issue.project_id}
-              parentIssueId={issue.id}
-              rootIssueId={rootIssueId}
-              spacingLeft={spacingLeft + 22}
-              disabled={disabled}
-              handleIssueCrudState={handleIssueCrudState}
-              subIssueOperations={subIssueOperations}
-            />
-          )}
       </ControlLink>
+
+      {/* should not expand the current issue if it is also the root issue*/}
+      {subIssueHelpers.issue_visibility.includes(issueId) &&
+        issue.project_id &&
+        subIssueCount > 0 &&
+        !isCurrentIssueRoot && (
+          <IssueList
+            workspaceSlug={workspaceSlug}
+            projectId={issue.project_id}
+            parentIssueId={issue.id}
+            rootIssueId={rootIssueId}
+            spacingLeft={spacingLeft + 22}
+            disabled={disabled}
+            handleIssueCrudState={handleIssueCrudState}
+            subIssueOperations={subIssueOperations}
+          />
+        )}
     </div>
   );
 });