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

Fix tasks layout: flexbox splitter, card sizing, progress status logic

Browse source 
- Changed tasks-main from grid to flexbox for proper panel sizing
- Fixed splitter drag to work with flexbox (set width directly)
- Task cards: reduced padding, proper min-height
- Fixed task-detail-panel to flex and fill available space
- Fixed terminal stats showing 'calculating...' for completed tasks
- Fixed child status not updating when all item_groups complete
- Improved taskmd header alignment and text overflow
- Fixed media queries for responsive layout
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2026-01-02 16:17:31 -03:00
parent 580c9072d4
commit 2c852715f8
3 changed files with 97 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -52,14 +52,15 @@
/* Header - visible and prominent */ /* Header - visible and prominent */
.taskmd-header { .taskmd-header {
padding: 20px 24px; padding: 16px 20px;
border-bottom: 1px solid var(--border, #2a2a2a); border-bottom: 1px solid var(--border, #2a2a2a);
flex-shrink: 0; flex-shrink: 0;
background: var(--surface, #111); background: var(--surface, #111);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 12px;
min-width: 0;
} }
.taskmd-url { .taskmd-url {
@ -81,22 +82,28 @@
} }
.taskmd-title { .taskmd-title {
font-size: 20px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: var(--text, #fff); color: var(--text, #fff);
margin: 0; margin: 0;
flex: 1; flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.taskmd-status-badge { .taskmd-status-badge {
display: inline-block; display: inline-flex;
padding: 8px 20px; align-items: center;
border-radius: 6px; padding: 6px 14px;
font-size: 12px; border-radius: 4px;
font-size: 11px;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap;
} }
.taskmd-status-badge.status-running { .taskmd-status-badge.status-running {

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

@ -294,22 +294,28 @@ body:has(.tasks-app) {
============================================================================= */ ============================================================================= */
.tasks-main { .tasks-main {
display: grid; display: flex;
grid-template-columns: 320px 6px 1fr; flex-direction: row;
flex: 1; flex: 1;
overflow: hidden !important; overflow: hidden;
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
min-height: 0; min-height: 0;
width: 100%;
position: relative;
} }
/* Splitter between panels */ /* Splitter between panels */
.tasks-splitter { .tasks-splitter {
width: 6px; width: 6px;
min-width: 6px;
max-width: 6px;
flex: 0 0 6px;
background: var(--border, #2a2a2a); background: var(--border, #2a2a2a);
cursor: col-resize; cursor: col-resize;
transition: background 0.2s; transition: background 0.2s;
position: relative; position: relative;
z-index: 10;
} }
.tasks-splitter:hover { .tasks-splitter:hover {
@ -339,22 +345,25 @@ body:has(.tasks-app) {
.tasks-list-panel { .tasks-list-panel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden !important; overflow: hidden;
border-right: 1px solid var(--border, #2a2a2a); border-right: none;
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
min-height: 0; min-height: 0;
flex: 0 0 280px;
width: 280px;
background: var(--bg, #0a0a0a);
} }
.tasks-list-scroll { .tasks-list-scroll {
flex: 1; flex: 1;
overflow-y: scroll; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding: 16px; padding: 12px;
padding-right: 4px; padding-right: 6px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 8px;
} }
/* ============================================ */ /* ============================================ */
@ -412,15 +421,16 @@ 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: 1px solid var(--border, #2a2a2a);
border-radius: 12px; border-radius: 8px;
padding: 32px 32px; padding: 16px 14px;
padding-left: 40px; padding-left: 18px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
min-height: 200px; min-height: 60px;
height: auto;
} }
.task-card::before { .task-card::before {
@ -428,7 +438,7 @@ body:has(.tasks-app) {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 5px; width: 3px;
height: 100%; height: 100%;
background: var(--text-secondary, #666); background: var(--text-secondary, #666);
transition: background 0.2s ease; transition: background 0.2s ease;
@ -465,23 +475,23 @@ body:has(.tasks-app) {
.task-card.selected { .task-card.selected {
border-color: var(--primary, #c5f82a); border-color: var(--primary, #c5f82a);
box-shadow: 0 0 0 2px var(--primary, #c5f82a); box-shadow: 0 0 0 1px var(--primary, #c5f82a);
} }
.task-card-header { .task-card-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 20px; gap: 10px;
margin-bottom: 0; margin-bottom: 8px;
} }
.task-card-title { .task-card-title {
font-size: 18px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: var(--text, #fff); color: var(--text, #fff);
margin: 0; margin: 0;
line-height: 1.5; line-height: 1.4;
flex: 1; flex: 1;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -490,10 +500,10 @@ body:has(.tasks-app) {
} }
.task-card-status { .task-card-status {
font-size: 13px; font-size: 10px;
font-weight: 700; font-weight: 700;
padding: 10px 20px; padding: 4px 8px;
border-radius: 8px; border-radius: 4px;
text-transform: uppercase; text-transform: uppercase;
white-space: nowrap; white-space: nowrap;
background: var(--surface, #1a1a1a); background: var(--surface, #1a1a1a);
@ -558,17 +568,18 @@ body:has(.tasks-app) {
.task-card-footer { .task-card-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 10px; gap: 6px;
padding-top: 14px; padding-top: 8px;
border-top: 2px solid var(--border, #2a2a2a); margin-top: 8px;
border-top: 1px solid var(--border, #2a2a2a);
} }
.task-action-btn { .task-action-btn {
background: transparent; background: transparent;
border: none; border: none;
padding: 4px 8px; padding: 2px 6px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 12px;
opacity: 0.5; opacity: 0.5;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
} }
@ -579,24 +590,24 @@ body:has(.tasks-app) {
/* Task Card Progress */ /* Task Card Progress */
.task-card-progress { .task-card-progress {
margin-bottom: 18px; margin-bottom: 8px;
} }
.progress-bar { .progress-bar {
height: 10px; height: 4px;
background: var(--surface, #1a1a1a); background: var(--surface, #1a1a1a);
border-radius: 6px; border-radius: 2px;
overflow: hidden; overflow: hidden;
margin-bottom: 10px; margin-bottom: 6px;
border: 2px solid var(--border, #2a2a2a); border: none;
} }
.progress-fill { .progress-fill {
height: 100%; height: 100%;
background: var(--primary, #c5f82a); background: var(--primary, #c5f82a);
border-radius: 4px; border-radius: 2px;
transition: width 0.3s ease; transition: width 0.3s ease;
box-shadow: 0 0 8px rgba(197, 248, 42, 0.4); box-shadow: none;
} }
.task-card.awaiting .progress-fill { .task-card.awaiting .progress-fill {
@ -610,24 +621,24 @@ body:has(.tasks-app) {
} }
.progress-steps { .progress-steps {
font-size: 14px; font-size: 11px;
font-weight: 500; font-weight: 500;
color: var(--text-secondary, #a1a1a1); color: var(--text-secondary, #a1a1a1);
} }
.progress-percent { .progress-percent {
font-size: 14px; font-size: 11px;
font-weight: 700; font-weight: 600;
color: var(--primary, #c5f82a); color: var(--primary, #c5f82a);
background: var(--primary-light, rgba(197, 248, 42, 0.15)); background: transparent;
padding: 4px 12px; padding: 0;
border-radius: 6px; border-radius: 0;
border: 2px solid var(--primary, #c5f82a); border: none;
} }
.task-card.awaiting .progress-percent { .task-card.awaiting .progress-percent {
color: var(--warning, #f59e0b); color: var(--warning, #f59e0b);
background: rgba(245, 158, 11, 0.15); background: transparent;
} }
/* Task Card Status */ /* Task Card Status */
@ -751,7 +762,9 @@ body:has(.tasks-app) {
font-weight: 600; font-weight: 600;
color: var(--text, #fff); color: var(--text, #fff);
margin: 0; margin: 0;
line-height: 1.4; line-height: 1.3;
flex: 1;
min-width: 200px;
} }
.task-detail-header .task-status { .task-detail-header .task-status {
@ -912,10 +925,13 @@ body:has(.tasks-app) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--surface, #111); background: var(--surface, #111);
overflow: hidden !important; overflow-y: auto;
overflow-x: hidden;
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
min-height: 0; min-height: 0;
min-width: 0;
flex: 1 1 0%;
position: relative; position: relative;
} }
@ -1400,6 +1416,10 @@ body:has(.tasks-app) {
justify-content: center; justify-content: center;
padding: 60px 24px; padding: 60px 24px;
text-align: center; text-align: center;
height: 100%;
width: 100%;
overflow: hidden;
background: var(--surface, #111);
} }
.empty-icon { .empty-icon {
@ -1688,8 +1708,9 @@ body:has(.tasks-app) {
/* Responsive Design */ /* Responsive Design */
@media (max-width: 1200px) { @media (max-width: 1200px) {
.tasks-main { .tasks-list-panel {
grid-template-columns: 35% 65%; flex: 0 0 250px;
width: 250px;
} }
.terminal-stats { .terminal-stats {
@ -1699,7 +1720,18 @@ body:has(.tasks-app) {
@media (max-width: 1024px) { @media (max-width: 1024px) {
.tasks-main { .tasks-main {
grid-template-columns: 1fr; flex-direction: column;
}
.tasks-list-panel {
flex: 0 0 auto;
width: 100%;
max-width: none;
max-height: 40vh;
}
.tasks-splitter {
display: none;
} }
.task-detail-panel { .task-detail-panel {
@ -3220,15 +3252,9 @@ body:has(.tasks-app) {
} }
/* ============================================================================= /* =============================================================================
TASK DETAIL PANEL - LARGER & MORE PROMINENT TASK DETAIL RICH VIEW OVERRIDES
============================================================================= */ ============================================================================= */
.task-detail-panel {
flex: 1;
min-width: 0;
max-width: none;
}
.task-detail-rich { .task-detail-rich {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

3
ui/suite/tasks/tasks.html
View file

@ -586,7 +586,8 @@
const diff = e.clientX - startX; const diff = e.clientX - startX;
const newWidth = Math.max(200, Math.min(600, startWidth + diff)); const newWidth = Math.max(200, Math.min(600, startWidth + diff));
main.style.gridTemplateColumns = `${newWidth}px 6px 1fr`; leftPanel.style.flex = `0 0 ${newWidth}px`;
leftPanel.style.width = `${newWidth}px`;
}); });
document.addEventListener("mouseup", function () { document.addEventListener("mouseup", function () {