[WEB-2390] fix: Clickable Area for Issue List Layout Item (#5536)

* Updated control block to cover the whole element

* Updated the control link to cover the whole issues and relation blocks

* updated word wrap in notifications

* Reverted break words as its a different issue.

web/core/components/issues/issue-layouts/list/block.tsx

@@ -17,7 +17,6 @@ import { IssueProperties } from "@/components/issues/issue-layouts/properties";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
-import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import { TSelectionHelper } from "@/hooks/use-multiple-select";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
@@ -70,16 +69,21 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
   // hooks
   const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
   const { getProjectIdentifierById } = useProject();
-  const { getIsIssuePeeked, peekIssue, subIssues: subIssuesStore } = useIssueDetail();
-  const { handleRedirection } = useIssuePeekOverviewRedirection();
-  const { isMobile } = usePlatformOS();
+  const { getIsIssuePeeked, peekIssue, setPeekIssue, subIssues: subIssuesStore } = useIssueDetail();
 
-  // handlers
-  const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug, issue, isMobile, nestingLevel);
+  const handleIssuePeekOverview = (issue: TIssue) =>
+    workspaceSlug &&
+    issue &&
+    issue.project_id &&
+    issue.id &&
+    !getIsIssuePeeked(issue.id) &&
+    setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id, nestingLevel: nestingLevel });
 
   const issue = issuesMap[issueId];
   const subIssuesCount = issue?.sub_issues_count ?? 0;
 
+  const { isMobile } = usePlatformOS();
+
   useEffect(() => {
     const element = issueRef.current;
 
@@ -126,9 +130,16 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
   };
 
   //TODO: add better logic. This is to have a min width for ID/Key based on the length of project identifier
-  const keyMinWidth = displayProperties?.key ? (projectIdentifier?.length ?? 0) * 7 : 0;
+  const keyMinWidth = (projectIdentifier?.length ?? 0) * 7;
 
   return (
+    <ControlLink
+      id={`issue-${issue.id}`}
+      href={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${issue.id}`}
+      onClick={() => handleIssuePeekOverview(issue)}
+      className="w-full truncate cursor-pointer text-sm text-custom-text-100"
+      disabled={!!issue?.tempId}
+    >
       <Row
         ref={issueRef}
         className={cn(
@@ -167,6 +178,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                     </>
                   }
                   disabled={issue.project_id === projectId}
+                  renderByDefault={false}
                 >
                   <div className="flex-shrink-0 grid place-items-center w-3.5 absolute left-1">
                     <MultipleSelectEntityAction
@@ -184,14 +196,13 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                   </div>
                 </Tooltip>
               )}
-            {displayProperties && (displayProperties.key || displayProperties.issue_type) && (
+              {displayProperties && displayProperties?.key && (
                 <div className="flex-shrink-0" style={{ minWidth: `${keyMinWidth}px` }}>
                   {issue.project_id && (
                     <IssueIdentifier
                       issueId={issueId}
                       projectId={issue.project_id}
                       textContainerClassName="text-xs font-medium text-custom-text-300"
-                    displayProperties={displayProperties}
                     />
                   )}
                 </div>
@@ -231,19 +242,9 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                 <p className="truncate">{issue.name}</p>
               </Tooltip>
             ) : (
-            <ControlLink
-              id={`issue-${issue.id}`}
-              href={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${
-                issue.id
-              }`}
-              onClick={() => handleIssuePeekOverview(issue)}
-              className="w-full truncate cursor-pointer text-sm text-custom-text-100"
-              disabled={!!issue?.tempId}
-            >
               <Tooltip tooltipContent={issue.name} isMobile={isMobile} position="top-left" renderByDefault={false}>
                 <p className="truncate">{issue.name}</p>
               </Tooltip>
-            </ControlLink>
             )}
           </div>
           {!issue?.tempId && (
@@ -290,5 +291,6 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
           )}
         </div>
       </Row>
+    </ControlLink>
   );
 });

web/core/components/issues/relations/issue-list-item.tsx

@@ -84,6 +84,12 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
 
   return (
     <div key={relationIssueId}>
+      <ControlLink
+        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"
+      >
         {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" />
@@ -106,16 +112,9 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
                 )}
               </div>
 
-            <ControlLink
-              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"
-            >
               <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
                 <span>{issue.name}</span>
               </Tooltip>
-            </ControlLink>
             </div>
             <div className="flex-shrink-0 text-sm">
               <RelationIssueProperty
@@ -164,6 +163,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
             </div>
           </div>
         )}
+      </ControlLink>
     </div>
   );
 });

web/core/components/issues/sub-issues/issue-list-item.tsx

@@ -82,6 +82,12 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
 
   return (
     <div key={issueId}>
+      <ControlLink
+        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"
+      >
         {issue && (
           <div
             className="group relative flex min-h-11 h-full w-full items-center gap-3 pr-2 py-1 transition-all hover:bg-custom-background-90"
@@ -137,17 +143,9 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
                   />
                 )}
               </div>
-
-            <ControlLink
-              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"
-            >
               <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
                 <span>{issue.name}</span>
               </Tooltip>
-            </ControlLink>
             </div>
 
             <div className="flex-shrink-0 text-sm">
@@ -235,6 +233,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
               subIssueOperations={subIssueOperations}
             />
           )}
+      </ControlLink>
     </div>
   );
 });