ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(app): fade overflowing titlebar tabs (#32082)

Browse source
This commit is contained in:
Luke Parker 2026-06-13 17:33:31 +10:00 • committed by GitHub
commit 2630f457b9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 75 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

46
packages/app/src/components/titlebar.css Normal file
View file

@ -0,0 +1,46 @@
@keyframes titlebar-tab-fade-left {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes titlebar-tab-fade-right {
from {
visibility: visible;
}
to {
visibility: hidden;
}
}
/* The narrow ranges preserve the binary thresholds of scrollLeft > 0 and
remaining scroll distance > 1px. Hidden defaults make an inactive timeline
(no overflow) a no-op. Unsupported browsers also degrade to no fades. */
[data-slot="titlebar-tabs"] {
timeline-scope: --titlebar-tabs-scroll;
[data-slot^="titlebar-tabs-fade-"] {
visibility: hidden;
}
}
@supports (animation-timeline: --titlebar-tabs-scroll) and (timeline-scope: --titlebar-tabs-scroll) {
[data-slot="titlebar-tabs-scroll"] {
scroll-timeline: --titlebar-tabs-scroll x;
}
[data-slot="titlebar-tabs-fade-left"] {
animation: titlebar-tab-fade-left linear both;
animation-timeline: --titlebar-tabs-scroll;
animation-range: 0 0.1px;
}
[data-slot="titlebar-tabs-fade-right"] {
animation: titlebar-tab-fade-right linear both;
animation-timeline: --titlebar-tabs-scroll;
animation-range: calc(100% - 1.1px) calc(100% - 1px);
}
}