till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-15 04:41:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

design(todo): wrap task and subtask titles instead of truncating

Browse source 
- Remove white-space: nowrap / overflow: hidden / text-overflow: ellipsis
- Titles wrap to multiple lines so all content is always readable
- align-items: flex-start on card and subtask rows so checkbox
  and priority dot stay aligned to the first text line (margin-top: 0.2rem)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-31 17:36:31 +02:00
parent adfcc7dcee
commit 420bf07520
1 changed files with 9 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

19
apps/todo/apps/web/src/lib/components/kanban/KanbanTaskCard.svelte
View file

@ -339,7 +339,7 @@
/* Paper-style: no card, no border, just text on the page */
.kanban-card {
display: flex;
align-items: center;
align-items: flex-start;
gap: 0.625rem;
padding: 0.2rem 0;
background: transparent;
@ -363,15 +363,16 @@
opacity: 0.45;
}
/* Priority dot — slim left accent */
/* Priority dot — slim left accent, aligned to first line */
.priority-dot {
width: 3px;
height: 1rem;
border-radius: 2px;
flex-shrink: 0;
margin-top: 0.2rem;
}
/* Checkbox — sized to match title text height */
/* Checkbox — sized to match title text height, aligned to first line */
.task-checkbox {
width: 1.1rem;
height: 1.1rem;
@ -385,6 +386,7 @@
transition: all 0.15s;
flex-shrink: 0;
padding: 0;
margin-top: 0.2rem;
}
:global(.dark) .task-checkbox {
@ -420,11 +422,9 @@
font-size: 0.9375rem;
font-weight: 400;
color: hsl(var(--color-foreground));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
line-height: 1.4;
word-break: break-word;
}
:global(.dark) .task-title {
@ -642,7 +642,7 @@
.subtask-row {
display: flex;
align-items: center;
align-items: flex-start;
gap: 0.625rem;
padding: 0.15rem 0;
background: transparent;
@ -664,6 +664,7 @@
flex-shrink: 0;
transition: all 0.15s;
color: white;
margin-top: 0.2rem;
}
:global(.dark) .subtask-check {
@ -683,10 +684,8 @@
font-size: 0.9375rem;
font-weight: 400;
color: hsl(var(--color-foreground));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
word-break: break-word;
}
:global(.dark) .subtask-title {