Skip to content

Commit

Permalink
[#53451] make editor toolbar sticky in mobile view
Browse files Browse the repository at this point in the history
This was not working due to the overflow attribute being set to
something else than visible or clip. As `clip` is mostly the same as
`hidden`, I was able to restore the stickiness by using that.

See
https://benfrain.com/yes-you-can-use-position-sticky-and-overflow-together/
  • Loading branch information
EinLama committed Feb 26, 2025
1 parent 630b825 commit fdc58ec
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
&--split-left
border-right: 1px solid var(--borderColor-default)
overflow-y: auto
overflow-x: hidden
overflow-x: clip
flex: 2
position: relative
@include styled-scroll-bar
Expand Down
7 changes: 7 additions & 0 deletions frontend/src/global_styles/layout/work_packages/_mobile.sass
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,13 @@
margin: 0
width: initial
border: none
// Set overflow to clip so that the editor toolbar can stick, see WP#53451
overflow-y: clip

// We need to cancel out the padding of the page content.
// Otherwise, the scrolled content will be visible above the toolbar
.document-editor__toolbar
top: -10px

.work-packages--panel-inner
padding: 5px 0 20px 0
Expand Down

0 comments on commit fdc58ec

Please sign in to comment.