From fa4a533d29d9169dc4f7b391edaee69c46f2a597 Mon Sep 17 00:00:00 2001
From: DCCONSTRUCTIONS <dcconstructions@MacBook-Pro-DCCONSTRUCTIONS-2.local>
Date: Fri, 8 May 2026 15:47:50 +0300
Subject: [PATCH] =?UTF-8?q?UI=20-=20=D0=9C=D0=95=D0=96=D0=9F=D0=A0=D0=9E?=
 =?UTF-8?q?=D0=95=D0=9A=D0=A2=D0=9D=D0=90=D0=AF=20=D0=9A=D0=9E=D0=9C=D0=9C?=
 =?UTF-8?q?=D0=A3=D0=9D=D0=98=D0=9A=D0=90=D0=A6=D0=98=D0=AF:=20KANBAN=20?=
 =?UTF-8?q?=D0=90=D0=92=D0=90=D0=A2=D0=90=D0=A0=D0=AB=20=D0=98=D0=A1=D0=9F?=
 =?UTF-8?q?=D0=9E=D0=9B=D0=9D=D0=98=D0=A2=D0=95=D0=9B=D0=95=D0=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kanban/internal-contour-card.tsx          | 50 +++++++++++++++++--
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/plane-src/apps/web/core/components/issues/issue-layouts/kanban/internal-contour-card.tsx b/plane-src/apps/web/core/components/issues/issue-layouts/kanban/internal-contour-card.tsx
index e14d9ff..62dc571 100644
--- a/plane-src/apps/web/core/components/issues/issue-layouts/kanban/internal-contour-card.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-layouts/kanban/internal-contour-card.tsx
@@ -87,6 +87,10 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
   const checkerItemsCompleted = issue.checker_items_completed_count ?? 0;
   const hasCheckerProgress = checkerBlocksTotal > 0;
   const assigneeIds = issue.assignee_ids ?? [];
+  const visibleAssigneeIds = assigneeIds.slice(0, 3);
+  const assigneeCount = assigneeIds.length;
+  const assigneeStackWidthClass =
+    assigneeCount > 3 ? "w-[68px]" : assigneeCount === 3 ? "w-[62px]" : assigneeCount === 2 ? "w-[44px]" : "w-7";
   const cornerControlClasses = cn(
     "flex h-12 w-12 -translate-x-0.5 -translate-y-0.5 items-center justify-center rounded-full border bg-transparent shadow-none ring-0 transition-colors outline-none",
     isActive
@@ -252,17 +256,55 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
         disabled={isReadOnly || !updateIssue}
         multiple
         buttonVariant="transparent-without-text"
-        className="h-7 w-7"
-        buttonContainerClassName="h-7 w-7"
+        className={cn("h-7 min-w-7", assigneeStackWidthClass)}
+        buttonContainerClassName={cn("h-7 min-w-7", assigneeStackWidthClass)}
         button={
           <div
             data-control-link-ignore="true"
             className={cn(
-              "flex h-7 min-w-7 items-center justify-center rounded-full border-0 bg-transparent p-0 shadow-none outline-none transition-colors [&_.bg-accent-subtle]:!bg-transparent [&_.border-subtle-1]:!border-0",
+              "relative flex h-7 min-w-7 items-center justify-start overflow-visible rounded-full border-0 bg-transparent p-0 shadow-none outline-none transition-colors [&_.border-subtle-1]:!border-0",
+              assigneeStackWidthClass,
               isActive ? "text-[rgb(var(--nodedc-on-card-active-rgb))]" : "text-white"
             )}
           >
-            <ButtonAvatars showTooltip={false} userIds={assigneeIds} size={26} />
+            {assigneeCount > 0 ? (
+              <div className={cn("relative h-[26px] overflow-visible", assigneeStackWidthClass)}>
+                {visibleAssigneeIds.map((userId, index) => {
+                  const userDetails = getUserDetails(userId);
+
+                  return (
+                    <div
+                      key={userId}
+                      className="absolute top-0 h-[26px] w-[26px] rounded-full border border-black/10"
+                      style={{ left: index * 18, zIndex: 10 + index }}
+                    >
+                      <Avatar
+                        src={getFileURL(userDetails?.avatar_url ?? "")}
+                        name={userDetails?.display_name}
+                        size={26}
+                        showTooltip={false}
+                        className="border-0 shadow-none ring-0 outline-none"
+                      />
+                    </div>
+                  );
+                })}
+                {assigneeCount > 3 && (
+                  <span
+                    className="absolute -top-2 z-50 font-semibold"
+                    style={{
+                      color: isActive ? "rgba(var(--nodedc-on-card-active-rgb), 0.7)" : "#B3B3B8",
+                      fontSize: "11px",
+                      lineHeight: 1,
+                      right: "-4px",
+                    }}
+                  >
+                    {assigneeCount}
+                  </span>
+                )}
+              </div>
+            ) : (
+              <ButtonAvatars showTooltip={false} userIds={assigneeIds} size={26} />
+            )}
           </div>
         }
       />