3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6439 from penpot/elenatorro-11035-fix-overflow-x-scroll-on-sidebar

Browse source 
🐛 Fix default scroll visibility on layers sidebar
This commit is contained in:
Elena Torró 2025-05-21 11:51:32 +02:00 • committed by GitHub
commit e80ca7e332
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 27 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
View file

@ -7,46 +7,60 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.element-name { .element-name {
--element-name-color: var(--context-hover-color, var(--layer-row-foreground-color));
--element-name-comp-color: var(--context-hover-color, var(--layer-row-component-foreground-color));
--element-name-opacity: var(--context-hover-opacity, $op-7);
@include textEllipsis; @include textEllipsis;
@include bodySmallTypography; @include bodySmallTypography;
color: var(--element-name-color);
flex-grow: 1; flex-grow: 1;
height: 100%; block-size: 100%;
align-content: center; align-content: center;
color: var(--context-hover-color, var(--layer-row-foreground-color)); min-inline-size: var(--sp-xl);
&.selected { &.selected {
color: var(--layer-row-foreground-color-selected); color: var(--layer-row-foreground-color-selected);
} }
&.type-comp { &.type-comp {
color: var(--context-hover-color, var(--layer-row-component-foreground-color)); color: var(--element-name-comp-color);
&.hidden { &.hidden {
opacity: var(--context-hover-opacity, $op-7); opacity: var(--element-name-opacity);
} }
} }
&.hidden { &.hidden {
opacity: var(--context-hover-opacity, $op-7); opacity: var(--element-name-opacity);
} }
} }
.element-name-input { .element-name-input {
--element-name-input-border-color: var(--input-border-color-focus);
--element-name-input-color: var(--layer-row-foreground-color);
@include textEllipsis; @include textEllipsis;
@include bodySmallTypography; @include bodySmallTypography;
@include removeInputStyle; @include removeInputStyle;
flex-grow: 1; flex-grow: 1;
height: $s-28; height: $s-28;
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size))); max-inline-size: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
margin: 0; margin: 0;
padding-left: $s-6; padding-inline-start: $s-6;
border-radius: $br-8; border-radius: $br-8;
border: $s-1 solid var(--input-border-color-focus); border: $s-1 solid var(--element-name-input-border-color);
color: var(--layer-row-foreground-color); color: var(--element-name-input-color);
&.selected { &.selected {
min-width: $s-88; min-inline-size: $s-100;
} }
} }
.element-name-touched { .element-name-touched {
color: var(--layer-row-component-foreground-color); --element-name-touched-color: var(--layer-row-component-foreground-color);
color: var(--element-name-touched-color);
} }

2
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

@ -227,7 +227,7 @@
flex-direction: column; flex-direction: column;
height: calc(100vh - var(--calculated-height)); height: calc(100vh - var(--calculated-height));
width: calc(var(--width) + var(--depth) * var(--layer-indentation-size)); width: calc(var(--width) + var(--depth) * var(--layer-indentation-size));
overflow-x: scroll; overflow-x: auto;
overflow-y: overlay; overflow-y: overlay;
scrollbar-gutter: stable; scrollbar-gutter: stable;

2
frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
View file

@ -39,7 +39,7 @@
flex-direction: column; flex-direction: column;
height: calc(-38px + var(--height, $s-200)); height: calc(-38px + var(--height, $s-200));
width: var(--width); width: var(--width);
overflow-x: scroll; overflow-x: hidden;
overflow-y: overlay; overflow-y: overlay;
scrollbar-gutter: stable; scrollbar-gutter: stable;