github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-10-29 05:50:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Lay out token pills in nested groups side by side again (#12120)

Browse Source 
The nested group wrapper only turned into a wrapping flex row when it
had a direct button child. Since the pills are wrapped in the DS
tooltip (#11900), the button is no longer a direct child, so pills in
nested groups were stacked one per row. Match pills as "any child that
is not a group" instead, so the rule no longer depends on the pill's
own markup.

Also drop the .token-pill rules of this module: CSS modules prefix
them with the token_tree scope, so they never matched the pill button.

Closes #12099

AI-assisted-by: claude-opus-5-5
This commit is contained in:
Eva Marco 2026-10-06 13:03:38 +02:00 committed by GitHub
parent 3fe48727ea
commit d70b754652
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 3 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/app/main/ui/workspace/tokens/management/token_tree.scss
View File

@ -22,10 +22,6 @@
margin-block-end: var(--sp-s);
}
}
& .token-pill {
flex: 0 0 auto;
}
}
.node-parent {
@ -37,7 +33,9 @@
padding-inline-start: var(--sp-s);
border-inline-start: $b-2 solid var(--color-background-quaternary);
&:has(> button) {
// Match pills as "not a group" so the rule does not depend on the
// pill's own markup, which lives in another module.
&:has(> :not(.node-parent)) {
display: flex;
flex-wrap: wrap;
gap: var(--sp-xs);
@ -50,8 +48,4 @@
margin-block-end: var(--sp-s);
}
}
& .token-pill {
flex: 0 0 auto;
}
}