ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-14 01:50:39 +09:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui): collapse empty kanban columns to save horizontal space

Browse source 
Empty status columns took the same 260px width as populated ones,
wasting horizontal space and forcing unnecessary scrolling. Collapse
empty columns to 48px (showing only the status icon) and expand
them back when an issue is dragged over for drop targeting.

Closes #2279
This commit is contained in:
plind-dm 2026-04-03 23:18:38 +09:00
parent ca8d35fd99
commit 58db67c318
1 changed files with 14 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

22
ui/src/components/KanbanBoard.tsx
View file

@ -63,16 +63,22 @@ function KanbanColumn({
}) {
const { setNodeRef, isOver } = useDroppable({ id: status });
const isEmpty = issues.length === 0;
return (
<div className="flex flex-col min-w-[260px] w-[260px] shrink-0">
<div className="flex items-center gap-2 px-2 py-2 mb-1">
<div className={`flex flex-col shrink-0 transition-all ${isEmpty && !isOver ? "min-w-[48px] w-[48px]" : "min-w-[260px] w-[260px]"}`}>
<div className={`flex items-center gap-2 px-2 py-2 mb-1 ${isEmpty && !isOver ? "justify-center" : ""}`}>
<StatusIcon status={status} />
<span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{statusLabel(status)}
</span>
<span className="text-xs text-muted-foreground/60 ml-auto tabular-nums">
{issues.length}
</span>
{(!isEmpty || isOver) && (
<>
<span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
{statusLabel(status)}
</span>
<span className="text-xs text-muted-foreground/60 ml-auto tabular-nums">
{issues.length}
</span>
</>
)}
</div>
<div
ref={setNodeRef}