From ae931f817227325031a2a57a6864b66184ba4bb3 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 29 Jul 2024 13:23:12 +0530
Subject: [PATCH] [WEB-2054] fix: kanban layout loader enhancements and issue
 count alignment (#5232)

* fix: kanban layout issue count alignment

* fix: kanban layout loader spacing and padding
---
 .../issues/issue-layouts/kanban/headers/group-by-card.tsx      | 2 +-
 web/core/components/ui/loader/layouts/kanban-layout-loader.tsx | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index 499880cf9..d7b1a04a3 100644
--- a/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -112,7 +112,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
         </div>
 
         <div
-          className={`relative flex items-center gap-1 ${
+          className={`relative flex items-baseline gap-1 ${
             verticalAlignPosition ? `flex-col` : `w-full flex-row overflow-hidden`
           }`}
         >
diff --git a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
index 85041bc5f..817a70876 100644
--- a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
@@ -11,11 +11,10 @@ export const KanbanLayoutLoader = ({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { ca
     {cardsInEachColumn.map((cardsInColumn, columnIndex) => (
       <div key={columnIndex} className="flex flex-col gap-3">
         <div className="flex items-center justify-between h-9 w-80">
-          <div className="flex item-center">
+          <div className="flex item-center gap-3 px-1.5">
             <span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
             <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
           </div>
-          <span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
         </div>
         {Array.from({ length: cardsInColumn }, (_, cardIndex) => (
           <KanbanIssueBlockLoader key={cardIndex} />