GeneralBots/botui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Compact task cards (inline status), fix tree expansion, reduce terminal height

Browse source
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2026-01-02 13:59:58 -03:00
parent 31bc86ab1e
commit 0f658fd7c5
2 changed files with 53 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
ui/suite/tasks/taskmd.css
View file

@ -128,18 +128,18 @@
/* Progress log section - takes ALL remaining space, content scrolls */ /* Progress log section - takes ALL remaining space, content scrolls */
.taskmd-section-progress { .taskmd-section-progress {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 150px; min-height: 200px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden !important; overflow: hidden !important;
} }
/* Terminal section - fixed at bottom, fixed height */ /* Terminal section - fixed at bottom, compact */
.taskmd-section-terminal { .taskmd-section-terminal {
flex: 0 0 120px; flex: 0 0 100px;
height: 120px; height: 100px;
min-height: 120px; min-height: 100px;
max-height: 120px; max-height: 100px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden !important; overflow: hidden !important;
@ -434,7 +434,7 @@
color: var(--error, #ef4444); color: var(--error, #ef4444);
} }
/* Tree Children */ /* Tree Children - visible when expanded (default state) */
.tree-children { .tree-children {
display: none; display: none;
background: var(--bg, #0a0a0a); background: var(--bg, #0a0a0a);
@ -456,7 +456,7 @@
/* Tree Items (Level 2) - Individual items like files */ /* Tree Items (Level 2) - Individual items like files */
.tree-items { .tree-items {
display: none; display: none;
padding: 12px 0 16px 0; padding: 8px 0 12px 0;
padding-left: 24px; padding-left: 24px;
background: var(--bg, #080808); background: var(--bg, #080808);
} }
@ -564,7 +564,25 @@
} }
.tree-item-check.pending { .tree-item-check.pending {
color: transparent; color: var(--text-tertiary, #444);
}
/* Completed items styling */
.tree-item.completed .tree-item-name {
color: var(--text-secondary, #888);
}
.tree-item.completed .tree-item-dot {
background: var(--success, #22c55e);
}
/* Parent section completed when all children done */
.tree-section.completed .tree-name {
color: var(--text-secondary, #888);
}
.tree-child.completed .tree-name {
color: var(--text-secondary, #888);
} }
/* Item row with duration and checkmark aligned right */ /* Item row with duration and checkmark aligned right */
@ -587,15 +605,15 @@
background: var(--accent-light, rgba(197, 248, 42, 0.03)); background: var(--accent-light, rgba(197, 248, 42, 0.03));
} }
/* TERMINAL Section */ /* TERMINAL Section - fixed at bottom */
.taskmd-terminal { .taskmd-terminal {
flex: 0 0 120px; flex: 0 0 100px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 120px; height: 100px;
min-height: 120px; min-height: 100px;
max-height: 120px; max-height: 100px;
overflow: hidden; overflow: hidden !important;
} }
.taskmd-terminal-header { .taskmd-terminal-header {

45
ui/suite/tasks/tasks.css
View file

@ -354,12 +354,14 @@ body:has(.tasks-app) {
.task-card { .task-card {
background: var(--surface-hover, #141414); background: var(--surface-hover, #141414);
border: 2px solid var(--border, #2a2a2a); border: 2px solid var(--border, #2a2a2a);
border-radius: 16px; border-radius: 12px;
padding: 20px; padding: 12px 16px;
padding-left: 20px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
min-height: 48px;
} }
.task-card::before { .task-card::before {
@ -410,32 +412,35 @@ body:has(.tasks-app) {
.task-card-header { .task-card-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: center;
gap: 12px; gap: 8px;
margin-bottom: 12px; margin-bottom: 0;
} }
.task-card-title { .task-card-title {
font-size: 15px; font-size: 13px;
font-weight: 600; font-weight: 500;
color: var(--text, #fff); color: var(--text, #fff);
margin: 0; margin: 0;
line-height: 1.4; line-height: 1.3;
flex: 1; flex: 1;
word-break: break-word; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.01em; letter-spacing: -0.01em;
} }
.task-card-status { .task-card-status {
font-size: 11px; font-size: 10px;
font-weight: 700; font-weight: 700;
padding: 6px 12px; padding: 4px 8px;
border-radius: 6px; border-radius: 4px;
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
background: var(--surface, #1a1a1a); background: var(--surface, #1a1a1a);
color: var(--text-secondary, #888); color: var(--text-secondary, #888);
letter-spacing: 0.02em; letter-spacing: 0.02em;
flex-shrink: 0;
} }
.task-card-status.status-running { .task-card-status.status-running {
@ -464,25 +469,15 @@ body:has(.tasks-app) {
} }
.task-card-body { .task-card-body {
display: flex; display: none;
align-items: center;
gap: 8px;
margin-bottom: 12px;
} }
.task-card-priority { .task-card-priority {
display: flex; display: none;
align-items: center;
} }
.priority-badge { .priority-badge {
font-size: 11px; display: none;
font-weight: 600;
padding: 4px 10px;
border-radius: 6px;
background: var(--surface, #1a1a1a);
color: var(--text-secondary, #888);
border: 1px solid var(--border, #2a2a2a);
} }
.priority-badge.priority-high, .priority-badge.priority-high,