From 90b50a41629a6f1d966fe75a0e51948bcfeef1e7 Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Fri, 17 May 2024 14:33:21 +0530
Subject: [PATCH] New Minor UX changes to Kanban (#4499)

---
 web/components/issues/issue-layouts/kanban/block.tsx      | 3 +++
 .../issues/issue-layouts/kanban/blocks-list.tsx           | 3 +++
 .../issues/issue-layouts/kanban/kanban-group.tsx          | 8 +++++---
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
index e40112a75..2f8d7465f 100644
--- a/web/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -29,6 +29,7 @@ interface IssueBlockProps {
   displayProperties: IIssueDisplayProperties | undefined;
   isDragDisabled: boolean;
   draggableId: string;
+  canDropOverIssue: boolean;
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: TRenderQuickActions;
   canEditProperties: (projectId: string | undefined) => boolean;
@@ -108,6 +109,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
     issuesMap,
     displayProperties,
     isDragDisabled,
+    canDropOverIssue,
     updateIssue,
     quickActions,
     canEditProperties,
@@ -167,6 +169,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
       }),
       dropTargetForElements({
         element,
+        canDrop: () => canDropOverIssue,
         getData: () => ({ id: issue?.id, type: "ISSUE" }),
         onDragEnter: () => {
           setIsDraggingOverBlock(true);
diff --git a/web/components/issues/issue-layouts/kanban/blocks-list.tsx b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
index c6dd43c39..db2e55c8b 100644
--- a/web/components/issues/issue-layouts/kanban/blocks-list.tsx
+++ b/web/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -15,6 +15,7 @@ interface IssueBlocksListProps {
   updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: TRenderQuickActions;
   canEditProperties: (projectId: string | undefined) => boolean;
+  canDropOverIssue: boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
 }
 
@@ -26,6 +27,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
     issueIds,
     displayProperties,
     isDragDisabled,
+    canDropOverIssue,
     updateIssue,
     quickActions,
     canEditProperties,
@@ -55,6 +57,7 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
                 quickActions={quickActions}
                 draggableId={draggableId}
                 isDragDisabled={isDragDisabled}
+                canDropOverIssue={canDropOverIssue}
                 canEditProperties={canEditProperties}
                 scrollableContainerRef={scrollableContainerRef}
               />
diff --git a/web/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
index 8704cc879..07ea9fb58 100644
--- a/web/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/web/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -175,14 +175,15 @@ export const KanbanGroup = (props: IKanbanGroup) => {
     return preloadedData;
   };
 
-  const shouldOverlay = isDraggingOverColumn && (orderBy !== "sort_order" || isDropDisabled);
+  const canDropOverIssue = orderBy === "sort_order";
+  const shouldOverlay = isDraggingOverColumn && (!canDropOverIssue || isDropDisabled);
   const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
 
   return (
     <div
       id={`${groupId}__${sub_group_id}`}
       className={cn(
-        "relative h-full transition-all min-h-[50px]",
+        "relative h-full transition-all min-h-[120px]",
         { "bg-custom-background-80 rounded": isDraggingOverColumn },
         { "vertical-scrollbar scrollbar-md": !sub_group_by && !shouldOverlay }
       )}
@@ -201,7 +202,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
       >
         <div
           className={cn(
-            "p-3 mt-6 flex flex-col border-[1px] rounded items-center",
+            "p-3 mt-8 flex flex-col border-[1px] rounded items-center",
             {
               "bg-custom-background-primary border-custom-border-primary text-custom-text-primary": shouldOverlay,
             },
@@ -231,6 +232,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
         quickActions={quickActions}
         canEditProperties={canEditProperties}
         scrollableContainerRef={sub_group_by ? scrollableContainerRef : columnRef}
+        canDropOverIssue={canDropOverIssue}
       />
 
       {enableQuickIssueCreate && !disableIssueCreation && (