From 254a76dcc7afe4fe61cbf98ed821cae7d5988d3b Mon Sep 17 00:00:00 2001 From: Jonas Date: Wed, 7 Jun 2023 18:23:31 +0200 Subject: [PATCH 1/2] Prevent cumulative layout shift when richworkspace is loading Instead of only increasing editor height with growing document length, let's stick to a fixed height (25vh) and use that one already while loading the document. The editor still increases when it gets focused. Fixes: #2834 Fixes: #2803 Signed-off-by: Jonas --- src/views/RichWorkspace.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue index 3c0c123e708..04d96593728 100644 --- a/src/views/RichWorkspace.vue +++ b/src/views/RichWorkspace.vue @@ -259,11 +259,13 @@ export default { } #rich-workspace.focus { + min-height: 25vh; max-height: 50vh; } - #rich-workspace:not(.focus) { - max-height: 30vh; + #rich-workspace:not(.focus), #rich-workspace.icon-loading { + min-height: 25vh; + max-height: 25vh; position: relative; overflow: hidden; } From 748d58af5711b004a9e0970af4fe17a7c209c459 Mon Sep 17 00:00:00 2001 From: Jonas Date: Wed, 14 Jun 2023 18:22:18 +0200 Subject: [PATCH 2/2] !fixup Prevent cumulative layout shift when richworkspace is loading Instead of only increasing editor height with growing document length, let's stick to a fixed height (150px) and use that one already while loading the document. The editor still increases when it gets focused. Fixes: #2834 Fixes: #2803 Signed-off-by: Jonas --- src/views/RichWorkspace.vue | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue index 04d96593728..a11bc661427 100644 --- a/src/views/RichWorkspace.vue +++ b/src/views/RichWorkspace.vue @@ -203,7 +203,7 @@ export default { z-index: 61; position: relative; &.creatable { - min-height: 100px; + min-height: 150px; } } @@ -259,15 +259,19 @@ export default { } #rich-workspace.focus { - min-height: 25vh; + min-height: 150px; max-height: 50vh; } #rich-workspace:not(.focus), #rich-workspace.icon-loading { - min-height: 25vh; - max-height: 25vh; + min-height: 150px; + max-height: 150px; position: relative; overflow: hidden; + + :deep([data-text-el="menubar"]) { + display: none; + } } #rich-workspace:not(.focus):not(.icon-loading):not(.empty):after { @@ -285,10 +289,4 @@ export default { #rich-workspace.dark:not(.focus):not(.icon-loading):after { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-main-background)); } - - @media only screen and (max-width: 1024px) { - #rich-workspace:not(.focus) { - max-height: 30vh; - } - }