jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix tool shelf's scrollbar layout shift 

Caused by Chromium 113 removing `overflow: overlay;`.
This fixes it for just the tool shelf.
This commit is contained in:
Keavon Chambers 2023-08-03 23:33:24 -07:00
parent 50b67bf6f6
commit a267582b4c
3 changed files with 3 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/Editor.svelte
View File

@ -187,8 +187,6 @@
.scrollable-y {
// Firefox (standardized in CSS, but less capable)
scrollbar-width: thin;
scrollbar-width: 6px;
scrollbar-gutter: 6px;
scrollbar-color: var(--color-5-dullgray) transparent;
&:not(:hover) {
@ -234,24 +232,15 @@
}
.scrollable-x.scrollable-y {
// Standard
overflow: auto;
// WebKit
overflow: overlay;
}
.scrollable-x:not(.scrollable-y) {
// Standard
overflow: auto hidden;
// WebKit
overflow-x: overlay;
}
.scrollable-y:not(.scrollable-x) {
// Standard
overflow: hidden auto;
// WebKit
overflow-y: overlay;
}
}

2
frontend/src/components/floating-menus/MenuList.svelte
View File

@ -200,7 +200,7 @@
bind:this={self}
>
<!-- If we put the scrollableY on the layoutcol for non-font dropdowns then for some reason it always creates a tiny scrollbar.
However when we are using the virtual scrolling then we need the layoutcol to be scrolling so we can bind the events without using $refs. -->
However when we are using the virtual scrolling then we need the layoutcol to be scrolling so we can bind the events without using `self`. -->
<LayoutCol
bind:this={scroller}
scrollableY={scrollableY && virtualScrollingEntryHeight !== 0}

1
frontend/src/components/panels/Document.svelte
View File

@ -525,6 +525,7 @@
.shelf-and-viewport {
.shelf {
width: 32px;
flex: 0 0 auto;
.tools {