handle long titles with text-overflow ellipsis

- goals.css: goal-title truncates with ellipsis, goal-info
  gets min-width:0 (prevents flex overflow), mobile allows
  word-break wrap
- tasks.css: task-title truncates with ellipsis
- notes.css: note-card-title truncates with ellipsis
This commit is contained in:
Yuyao Huang 2026-05-09 10:57:09 +08:00
parent 91169f117b
commit bc590eb40a
3 changed files with 15 additions and 0 deletions

View File

@ -36,6 +36,7 @@
.goal-info {
flex: 1;
min-width: 0;
}
.goal-title {
@ -43,6 +44,9 @@
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goal-status {
@ -143,6 +147,11 @@
padding: 1rem;
}
.goal-title {
white-space: normal;
word-break: break-word;
}
.goal-actions {
justify-content: flex-end;
flex-wrap: wrap;

View File

@ -86,6 +86,9 @@
font-size: 1.05rem;
color: #2c3e50;
margin-bottom: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.note-card-meta {

View File

@ -125,6 +125,9 @@
.task-title {
font-weight: 600;
margin-bottom: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-status-badge {