From f6cbba9f2a19bed6a91da6fa07b19afd1746b77c Mon Sep 17 00:00:00 2001 From: Till JS Date: Wed, 1 Apr 2026 15:43:34 +0200 Subject: [PATCH] fix(todo): refine kanban quick-add row styling Adjust checkbox size, alignment offset, border opacity, font size, and dark mode support for the inline task creation row. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../kanban/QuickAddTaskInline.svelte | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/apps/todo/apps/web/src/lib/components/kanban/QuickAddTaskInline.svelte b/apps/todo/apps/web/src/lib/components/kanban/QuickAddTaskInline.svelte index 89c5d9c9a..bee9aa7ec 100644 --- a/apps/todo/apps/web/src/lib/components/kanban/QuickAddTaskInline.svelte +++ b/apps/todo/apps/web/src/lib/components/kanban/QuickAddTaskInline.svelte @@ -98,22 +98,27 @@ } .add-checkbox { - width: 1.25rem; - height: 1.25rem; - border-radius: 9999px; - border: 2px dashed var(--color-muted-foreground); - opacity: 0.4; + width: 1.1rem; + height: 1.1rem; + border-radius: 50%; + border: 1.5px dashed rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-muted-foreground); transition: all 0.15s; + margin-top: 0.2rem; + /* Offset to align with task cards: priority-dot(3px) + gap(0.625rem) */ + margin-left: calc(3px + 0.625rem); + } + + :global(.dark) .add-checkbox { + border-color: rgba(255, 255, 255, 0.35); } .inline-add-row.active .add-checkbox, .inline-add-trigger:hover .add-checkbox { - opacity: 0.6; border-color: var(--color-primary); color: var(--color-primary); } @@ -123,7 +128,8 @@ background: transparent; border: none; outline: none; - font-size: 0.875rem; + font-size: 0.9375rem; + font-weight: 400; color: var(--color-foreground); padding: 0; line-height: 1.5; @@ -131,13 +137,14 @@ .add-input::placeholder { color: var(--color-muted-foreground); - opacity: 0.6; + opacity: 0.5; } .add-placeholder { - font-size: 0.875rem; + font-size: 0.9375rem; + font-weight: 400; color: var(--color-muted-foreground); - opacity: 0.6; + opacity: 0.5; transition: all 0.15s; }