officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

the task tray shows the newest first, and forgets the oldest

Browse Source 
Three things about the background-task strip, all the same complaint: the chip you
want is the one you cannot see.

Newest first, because the strip scrolls horizontally and the far end is off-screen —
chronological order put every task you just started exactly where you had to scroll to
reach it. Finished chips are capped at five, so a long session stops turning the tray
into a history; running ones are never counted or dropped, since watching them is the
whole point. And the default horizontal scrollbar is ~15px tall and laid out inside the
row, which is what made the chips read as squeezed — it is thin now, and the row and
chips have the padding back.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-08-04 22:18:37 +00:00
co-authored by Claude Opus 5
parent ddc982ce5b
commit e1cc3a2cd5
3 changed files with 67 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/officer-web/styles/globals.css
+34 -9
View File
@@ -1,4 +1,4 @@
@import "tailwindcss";
@import 'tailwindcss';
@plugin 'tailwindcss-animate';
@custom-variant dark (&:is(.dark *));
@@ -123,12 +123,12 @@
@layer base {
:root {
/* Duck brand hex colors */
--duck-yellow: #F4C430;
--duck-orange: #EA580C;
--duck-teal: #0891B2;
--duck-yellow: #f4c430;
--duck-orange: #ea580c;
--duck-teal: #0891b2;
--duck-forest: #166534;
--duck-dark: #14532D;
--duck-beige: #E7D4B5;
--duck-dark: #14532d;
--duck-beige: #e7d4b5;
/* Page background */
--pixel-grid-color: rgba(20, 83, 45, 0.1);
@@ -328,14 +328,39 @@
background: #555;
}
.file-grid:has([data-state="open"]) [data-file-item]:not([data-state="open"]) {
/* Chat — the background-task strip. A default horizontal scrollbar is ~15px tall and is laid out INSIDE
the row, so it stole most of the chips' breathing room and made the tray read as squeezed. Thin, and
neutral enough to sit on either theme. */
.task-strip {
scrollbar-width: thin;
scrollbar-color: rgb(128 128 128 / 0.3) transparent;
}
.task-strip::-webkit-scrollbar {
height: 4px;
}
.task-strip::-webkit-scrollbar-track {
background: transparent;
}
.task-strip::-webkit-scrollbar-thumb {
background: rgb(128 128 128 / 0.3);
border-radius: 2px;
}
.task-strip:hover::-webkit-scrollbar-thumb {
background: rgb(128 128 128 / 0.5);
}
.file-grid:has([data-state='open']) [data-file-item]:not([data-state='open']) {
pointer-events: none;
}
.file-grid:has([data-state="open"]) [data-file-item]:not([data-state="open"]) .file-item-ellipsis {
.file-grid:has([data-state='open']) [data-file-item]:not([data-state='open']) .file-item-ellipsis {
opacity: 0 !important;
}
.file-grid [data-file-item][data-state="open"] .file-item-ellipsis {
.file-grid [data-file-item][data-state='open'] .file-item-ellipsis {
opacity: 1 !important;
}