From fdc58ec93871e2627dab0da02a3ae21e8126518d Mon Sep 17 00:00:00 2001 From: Tobias Dillmann Date: Wed, 26 Feb 2025 10:19:19 +0100 Subject: [PATCH] [#53451] make editor toolbar sticky in mobile view 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/ --- .../src/global_styles/layout/work_packages/_full_view.sass | 2 +- .../src/global_styles/layout/work_packages/_mobile.sass | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/src/global_styles/layout/work_packages/_full_view.sass b/frontend/src/global_styles/layout/work_packages/_full_view.sass index f80f657b2c8a..e3fbb0fdf1e7 100644 --- a/frontend/src/global_styles/layout/work_packages/_full_view.sass +++ b/frontend/src/global_styles/layout/work_packages/_full_view.sass @@ -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 diff --git a/frontend/src/global_styles/layout/work_packages/_mobile.sass b/frontend/src/global_styles/layout/work_packages/_mobile.sass index 8955fe375fcb..fc2e910b440f 100644 --- a/frontend/src/global_styles/layout/work_packages/_mobile.sass +++ b/frontend/src/global_styles/layout/work_packages/_mobile.sass @@ -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