Chore: change kanban layout and issue activity fixes (#3458)

* change back the to kanban to enable full board scrolling

* fix adding context to activity

web/components/core/activity.tsx

@@ -31,23 +31,25 @@ export const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
   const { workspaceSlug } = router.query;
 
   return (
-    <Tooltip tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
+    <Tooltip tooltipContent={activity?.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
-      <a
+      {activity?.issue_detail ? (
-        aria-disabled={activity.issue === null}
+        <a
-        href={`${
+          aria-disabled={activity.issue === null}
-          activity.issue_detail
+          href={`${`/${workspaceSlug ?? activity.workspace_detail?.slug}/projects/${activity.project}/issues/${
-            ? `/${workspaceSlug ?? activity.workspace_detail?.slug}/projects/${activity.project}/issues/${
+            activity.issue
-                activity.issue
+          }`}`}
-              }`
+          target={activity.issue === null ? "_self" : "_blank"}
-            : "#"
+          rel={activity.issue === null ? "" : "noopener noreferrer"}
-        }`}
+          className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline whitespace-nowrap"
-        target={activity.issue === null ? "_self" : "_blank"}
+        >
-        rel={activity.issue === null ? "" : "noopener noreferrer"}
+          {`${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`}{" "}
-        className="inline-flex items-center gap-1 font-medium text-custom-text-100 hover:underline whitespace-nowrap"
+          <span className="font-normal">{activity.issue_detail?.name}</span>
-      >
+        </a>
-        {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}{" "}
+      ) : (
-        <span className="font-normal">{activity.issue_detail?.name}</span>
+        <span className="inline-flex items-center gap-1 font-medium text-custom-text-100 whitespace-nowrap">
-      </a>
+          {" an Issue"}{" "}
+        </span>
+      )}
     </Tooltip>
   );
 };

web/components/issues/issue-layouts/kanban/default.tsx

@@ -84,7 +84,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
   const isGroupByCreatedBy = group_by === "created_by";
 
   return (
-    <div className={`relative w-full flex gap-3 overflow-hidden ${sub_group_by ? "h-full" : "h-full"}`}>
+    <div className={`relative w-full flex gap-3 ${sub_group_by ? "h-full" : "h-full"}`}>
       {list &&
         list.length > 0 &&
         list.map((_list: IGroupByColumn) => {

web/components/issues/issue-layouts/kanban/kanban-group.tsx

@@ -104,13 +104,13 @@ export const KanbanGroup = (props: IKanbanGroup) => {
   };
 
   return (
-    <div className={`relative w-full h-full overflow-hidden transition-all`}>
+    <div className={`relative w-full h-full transition-all`}>
       <Droppable droppableId={`${groupId}__${sub_group_id}`}>
         {(provided: any, snapshot: any) => (
           <div
             className={`relative h-full w-full transition-all ${
-              sub_group_by ? `` : `overflow-hidden overflow-y-auto`
+              snapshot.isDraggingOver ? `bg-custom-background-80` : ``
-            }  ${snapshot.isDraggingOver ? `bg-custom-background-80` : ``}`}
+            }`}
             {...provided.droppableProps}
             ref={provided.innerRef}
           >

web/components/issues/peek-overview/activity/card.tsx

@@ -48,7 +48,9 @@ export const IssueActivityCard: FC<IIssueActivityCard> = (props) => {
           issueActivity.map((activityId, index) => {
             // determines what type of action is performed
             const activityItem = activity.getActivityById(activityId) as IIssueActivity;
-            const message = activityItem.field ? <ActivityMessage activity={activityItem} /> : "created the issue.";
+            const message = activityItem.field ? <ActivityMessage activity={activityItem} /> : <span>
+                          created <IssueLink activity={activity} />
+                        </span>;
 
             if ("field" in activityItem && activityItem.field !== "updated_by") {
               return (

web/pages/profile/activity.tsx

@@ -9,7 +9,7 @@ import { UserService } from "services/user.service";
 // layouts
 import { ProfileSettingsLayout } from "layouts/settings-layout";
 // components
-import { ActivityIcon, ActivityMessage } from "components/core";
+import { ActivityIcon, ActivityMessage, IssueLink } from "components/core";
 import { RichReadOnlyEditor } from "@plane/rich-text-editor";
 // icons
 import { History, MessageSquare } from "lucide-react";
@@ -98,21 +98,13 @@ const ProfileActivityPage: NextPageWithLayout = observer(() => {
                 activityItem.field !== "modules" &&
                 activityItem.field !== "attachment" &&
                 activityItem.field !== "link" &&
-                activityItem.field !== "estimate" ? (
+                activityItem.field !== "estimate" &&
-                  <span className="text-custom-text-200">
+                !activityItem.field ? (
-                    created{" "}
+                  <span>
-                    <Link
+                    created <IssueLink activity={activityItem} />
-                      href={`/${activityItem.workspace_detail.slug}/projects/${activityItem.project}/issues/${activityItem.issue}`}
-                    >
-                      <span className="inline-flex items-center hover:underline">
-                        this issue. <ExternalLinkIcon className="ml-1 h-3.5 w-3.5" />
-                      </span>
-                    </Link>
                   </span>
-                ) : activityItem.field ? (
-                  <ActivityMessage activity={activityItem} showIssue />
                 ) : (
-                  "created the issue."
+                  <ActivityMessage activity={activityItem} showIssue />
                 );
 
               if ("field" in activityItem && activityItem.field !== "updated_by") {