TopherMayor/openclaw-taskboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[taskboard] improve kanban layout density

Browse Source
This commit is contained in:
Christopher Mayor
2026-03-07 13:22:17 -08:00
parent b70472f617
commit 77e7fbd860
2 changed files with 30 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/tasks-client.tsx
View File

@@ -160,7 +160,7 @@ export function TasksClient({
return (
<div className="space-y-6">
<div className="grid gap-4 xl:grid-cols-[minmax(0,1.2fr)_360px]">
<div className="grid gap-4 2xl:grid-cols-[minmax(0,1.35fr)_380px]">
<Card>
<CardHeader>
<CardTitle>Unified Task Intake</CardTitle>
@@ -312,27 +312,41 @@ export function TasksClient({
</CardContent>
</Card>
<div className="grid gap-4 xl:grid-cols-5">
<div className="space-y-3">
<div className="flex items-center justify-between gap-3">
<div>
<h2 className="text-lg font-semibold text-white">Task Board</h2>
<p className="text-sm text-slate-400">
Columns keep a readable width and scroll horizontally when the viewport is narrower than the full board.
</p>
</div>
<Badge variant="outline">{tasks.length} total tasks</Badge>
</div>
<div className="overflow-x-auto pb-3">
<div className="flex min-w-max gap-4">
{COLUMNS.map((column) => {
const columnTasks = tasks.filter((task) => task.status === column);
return (
<Card className="min-h-[420px]" key={column}>
<Card className="flex min-h-[560px] w-[340px] shrink-0 flex-col border-white/10 bg-slate-950/35 xl:w-[360px]" key={column}>
<CardHeader className="pb-4">
<CardTitle className="flex items-center justify-between text-base">
<span>{column}</span>
<Badge variant="secondary">{columnTasks.length}</Badge>
</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<CardContent className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto">
{columnTasks.map((task) => (
<div className="rounded-xl border border-white/10 bg-slate-950/40 p-4" key={task.id}>
<div className="min-w-0 rounded-xl border border-white/10 bg-slate-950/40 p-4" key={task.id}>
<div className="flex items-start justify-between gap-3">
<h3 className="font-medium text-white">{task.title}</h3>
<h3 className="min-w-0 break-words font-medium text-white">{task.title}</h3>
<Badge variant={task.priority === "Critical" ? "warning" : "outline"}>
{task.priority}
</Badge>
</div>
<p className="mt-2 text-sm text-slate-300">{task.description || "No description"}</p>
<p className="mt-2 break-words text-sm leading-6 text-slate-300">
{task.description || "No description"}
</p>
<div className="mt-3 flex flex-wrap gap-2 text-xs text-slate-400">
<Badge variant={familyVariant(task.family)}>{task.family || "manual"}</Badge>
<Badge variant="secondary">{task.assignee || "Unassigned"}</Badge>
@@ -346,11 +360,11 @@ export function TasksClient({
<dl className="mt-3 grid gap-1 text-xs text-slate-400">
<div className="flex justify-between gap-2">
<dt>Host</dt>
<dd>{task.target_host || "n/a"}</dd>
<dd className="break-words text-right">{task.target_host || "n/a"}</dd>
</div>
<div className="flex justify-between gap-2">
<dt>Channel</dt>
<dd className="text-right">{task.target_channel || "n/a"}</dd>
<dd className="break-all text-right">{task.target_channel || "n/a"}</dd>
</div>
</dl>
{task.result_summary ? (
@@ -358,7 +372,7 @@ export function TasksClient({
<p className="text-xs uppercase tracking-[0.2em] text-emerald-300/80">Latest Result</p>
<p className="mt-1 text-sm text-slate-200">{task.result_summary}</p>
{task.result_detail ? (
<p className="mt-1 text-xs text-slate-400">{task.result_detail}</p>
<p className="mt-1 break-words text-xs leading-5 text-slate-400">{task.result_detail}</p>
) : null}
</div>
) : null}
@@ -385,6 +399,8 @@ export function TasksClient({
</Card>
);
})}
</div>
</div>
</div>
</div>
);