From 9efc606acfcf0f163030d1084870d0c879e08c5d Mon Sep 17 00:00:00 2001
From: rahulramesha <rahulramesham@gmail.com>
Date: Wed, 1 May 2024 20:21:27 +0530
Subject: [PATCH] minor fixes for kanban dnd improvement

---
 web/components/issues/issue-layouts/kanban/block.tsx   |  2 +-
 .../issues/issue-layouts/kanban/kanban-group.tsx       | 10 +++++++---
 web/components/issues/issue-layouts/kanban/utils.ts    |  4 ++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index 8c484171b..15e0fadf1 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -186,7 +186,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
           disabled={!!issue?.tempId}
           ref={cardRef}
           className={cn(
-            "block rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
+            "block rounded border-[1px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
             { "hover:cursor-pointer": isDragAllowed },
             { "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id },
             { "bg-custom-background-80 z-[100]": isCurrentBlockDragging }
diff --git a/web/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
index b8d5f5dd1..955bd598b 100644
--- a/web/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -13,6 +13,7 @@ import {
   TIssueGroupByOptions,
   TIssueOrderByOptions,
 } from "@plane/types";
+import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -173,6 +174,8 @@ export const KanbanGroup = (props: IKanbanGroup) => {
   };
 
   const shouldOverlay = isDraggingOverColumn && orderBy !== "sort_order";
+  const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
+
   return (
     <div
       id={`${groupId}__${sub_group_id}`}
@@ -187,12 +190,13 @@ export const KanbanGroup = (props: IKanbanGroup) => {
         className={cn(
           "absolute top-0 left-0 h-full w-full justify-center items-center text-sm text-custom-text-100",
           {
-            "flex bg-custom-primary-10 border-[2px] border-custom-primary-40 rounded z-[2]": shouldOverlay,
+            "flex flex-col bg-custom-primary-10 border-[2px] border-custom-primary-40 rounded z-[2]": shouldOverlay,
           },
           { hidden: !shouldOverlay }
         )}
       >
-        <span>Drop here to move issue</span>
+        {readableOrderBy && <span>The layout is ordered by {readableOrderBy}.</span>}
+        <span>Drop here to move the issue.</span>
       </div>
       <KanbanIssueBlocksList
         sub_group_id={sub_group_id}
@@ -205,7 +209,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
         updateIssue={updateIssue}
         quickActions={quickActions}
         canEditProperties={canEditProperties}
-        scrollableContainerRef={scrollableContainerRef}
+        scrollableContainerRef={sub_group_by ? scrollableContainerRef : columnRef}
       />
 
       {enableQuickIssueCreate && !disableIssueCreation && (
diff --git a/web/components/issues/issue-layouts/kanban/utils.ts b/web/components/issues/issue-layouts/kanban/utils.ts
index 0c9c24f6e..489bbf93a 100644
--- a/web/components/issues/issue-layouts/kanban/utils.ts
+++ b/web/components/issues/issue-layouts/kanban/utils.ts
@@ -218,12 +218,12 @@ export const highlightIssueOnDrop = (elementId: string | undefined, shouldScroll
     const sourceElementId = elementId ?? "";
     const sourceElement = document.getElementById(sourceElementId);
     if (shouldScrollIntoView && sourceElement)
-      await scrollIntoView(sourceElement, { behavior: "smooth", block: "center" });
+      await scrollIntoView(sourceElement, { behavior: "smooth", block: "center", duration: 1500 });
     sourceElement?.classList?.add("highlight");
     setTimeout(() => {
       const sourceElementId = elementId ?? "";
       const sourceElement = document.getElementById(sourceElementId);
       sourceElement?.classList?.remove("highlight");
-    }, 1000);
+    }, 2000);
   }, 200);
 };