From 8409a8400468c4629110b416a7479e4620af6ed4 Mon Sep 17 00:00:00 2001
From: Lakhan Baheti <94619783+1akhanBaheti@users.noreply.github.com>
Date: Thu, 7 Dec 2023 18:13:54 +0530
Subject: [PATCH] fix: kanban layout UI (#3023)

* fix: quick add placement

* fix: assignee avatar size in kanban header

* fix: issue detail sidebar scroll

* fix: extra margin around links

* formatting
---
 .../issues/issue-layouts/kanban/default.tsx   |  6 ++--
 .../issue-layouts/kanban/headers/assignee.tsx |  2 +-
 web/components/issues/sidebar.tsx             | 34 ++++++++++---------
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index 6e2390d50..80d4fdb70 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -109,8 +109,8 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
             )}
 
             <div
-              className={`min-h-[150px] ${
-                verticalAlignPosition(_list) ? `w-[0px] overflow-hidden` : `w-full transition-all`
+              className={`${
+                verticalAlignPosition(_list) ? `min-h-[150px] w-[0px] overflow-hidden` : `w-full transition-all`
               }`}
             >
               <Droppable droppableId={`${getValueFromObject(_list, listKey) as string}__${sub_group_id}`}>
@@ -122,7 +122,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                     {...provided.droppableProps}
                     ref={provided.innerRef}
                   >
-                    {issues ? (
+                    {issues && !verticalAlignPosition(_list) ? (
                       <KanbanIssueBlocksList
                         sub_group_id={sub_group_id}
                         columnId={getValueFromObject(_list, listKey) as string}
diff --git a/web/components/issues/issue-layouts/kanban/headers/assignee.tsx b/web/components/issues/issue-layouts/kanban/headers/assignee.tsx
index da25c144d..e90e292d7 100644
--- a/web/components/issues/issue-layouts/kanban/headers/assignee.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/assignee.tsx
@@ -22,7 +22,7 @@ export interface IAssigneesHeader {
   addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
-export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="base" />;
+export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="md" />;
 
 export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
   const {
diff --git a/web/components/issues/sidebar.tsx b/web/components/issues/sidebar.tsx
index bd645769f..c863d752f 100644
--- a/web/components/issues/sidebar.tsx
+++ b/web/components/issues/sidebar.tsx
@@ -638,7 +638,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             </div>
           )}
           {(fieldsToShow.includes("all") || fieldsToShow.includes("link")) && (
-            <div className={`min-h-[116px] py-1 text-xs ${uneditable ? "opacity-60" : ""}`}>
+            <div className={`py-1 text-xs ${uneditable ? "opacity-60" : ""}`}>
               <div className="flex items-center justify-between gap-2">
                 <h4>Links</h4>
                 {isAllowed && (
@@ -654,21 +654,23 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                   </button>
                 )}
               </div>
-              <div className="mt-2 space-y-2">
-                {issueDetail?.issue_link && issueDetail.issue_link.length > 0 ? (
-                  <LinksList
-                    links={issueDetail.issue_link}
-                    handleDeleteLink={handleDeleteLink}
-                    handleEditLink={handleEditLink}
-                    userAuth={{
-                      isGuest: currentProjectRole === 5,
-                      isViewer: currentProjectRole === 10,
-                      isMember: currentProjectRole === 15,
-                      isOwner: currentProjectRole === 20,
-                    }}
-                  />
-                ) : null}
-              </div>
+              {issueDetail?.issue_link && issueDetail.issue_link.length > 0 && (
+                <div className="mt-2 space-y-2">
+                  {
+                    <LinksList
+                      links={issueDetail.issue_link}
+                      handleDeleteLink={handleDeleteLink}
+                      handleEditLink={handleEditLink}
+                      userAuth={{
+                        isGuest: currentProjectRole === 5,
+                        isViewer: currentProjectRole === 10,
+                        isMember: currentProjectRole === 15,
+                        isOwner: currentProjectRole === 20,
+                      }}
+                    />
+                  }
+                </div>
+              )}
             </div>
           )}
         </div>