vndangkhoa/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-06-01 03:14:35 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(web): keep Design Files tab visible when workspace tabs scroll (#842)

Browse source 
When many tabs open, the tab strip scrolls horizontally and the
Design Files entry slides off the left edge, leaving no obvious
way back to it.

Pin the Design Files button with position: sticky and a small
shadow so it stays anchored at the left while the rest of the
strip scrolls behind it.

Closes #775

Co-authored-by: Nagendhra <nagendhra405@gmail.com>
This commit is contained in:
Nagendhra Madishetti 2026-05-07 22:57:44 -04:00 committed by GitHub
parent 42bcfb6561
commit b3259f5baa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 20 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
apps/web/src/index.css
View file

@ -4666,6 +4666,26 @@ button.connector-action.is-loading {
.ws-tab.design-files-tab {
font-weight: 500;
color: var(--text);
/* Pin the Design Files entry to the left edge of the horizontally
scrollable tab strip so the user always has a way back to the file
list even when many tabs overflow. Without sticky positioning,
Design Files sits at flex index 0 and scrolls off the left edge
once the strip is wide enough to require horizontal scrolling.
Issue #775. */
position: sticky;
left: 0;
z-index: 1;
/* Solid panel surface so other tabs that scroll past underneath the
sticky element do not visibly bleed through. */
background: var(--bg-panel);
/* Subtle right-edge shadow signals the visual separation when other
tabs are scrolled beneath it. */
box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.12);
}
.ws-tab.design-files-tab.active {
/* Active state should still read as selected; layer the active tint
over the sticky panel surface. */
background: var(--bg-subtle);
}
.ws-tabs-actions { display: inline-flex; gap: 4px; align-items: center; }