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

🐛 Truncate long labels in the shadow options panel (#12414)

Browse Source 
Long translations of "Blur" and "Spread" ran over the number input in the
advanced shadow options. The label inherited display: flex from the legacy
%input-label placeholder, where text-overflow has no effect, and it could not
shrink below its text.

Make the label a block with the DS text-ellipsis mixin, size it to its text,
and cap it at the field width minus room for the number. Labels that fit look
the same as before; longer ones end in an ellipsis and keep their tooltip.

Closes #4456
This commit is contained in:
Stephen Sagarino Jr. 2026-10-19 16:24:11 +08:00 committed by GitHub
parent addc5bc31e
commit 8787937b7c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/main/ui/workspace/sidebar/options/rows/shadow_row.scss
View File

@ -8,6 +8,7 @@
@use "ds/typography.scss" as t;
@use "ds/_borders.scss" as *;
@use "ds/_utils.scss" as *;
@use "ds/mixins.scss" as *;
@use "refactor/common-refactor.scss" as deprecated;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
@ -84,8 +85,13 @@
@include t.use-typography("body-small");
.shadow-advanced-label {
@include text-ellipsis;
padding-inline-start: var(--sp-s);
inline-size: px2rem(60);
flex-shrink: 0;
inline-size: auto;
max-inline-size: calc(100% - #{px2rem(36)});
line-height: $sz-32;
}
}