diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js index 700b3fdd55..5016651119 100644 --- a/services/web/app/src/Features/Project/ProjectController.js +++ b/services/web/app/src/Features/Project/ProjectController.js @@ -1236,6 +1236,7 @@ const ProjectController = { detachRole, metadata: { viewport: false }, showUpgradePrompt, + fixedSizeDocument: true, }) timer.done() } diff --git a/services/web/app/views/layout-base.pug b/services/web/app/views/layout-base.pug index 451407a6bd..4f8f555c09 100644 --- a/services/web/app/views/layout-base.pug +++ b/services/web/app/views/layout-base.pug @@ -1,6 +1,7 @@ doctype html html( lang=(currentLngCode || 'en') + class=(fixedSizeDocument ? 'fixed-size-document' : undefined) ) - metadata = metadata || {} diff --git a/services/web/frontend/stylesheets/core/scaffolding.less b/services/web/frontend/stylesheets/core/scaffolding.less index 9e63feb46a..a4ac0963ce 100755 --- a/services/web/frontend/stylesheets/core/scaffolding.less +++ b/services/web/frontend/stylesheets/core/scaffolding.less @@ -23,6 +23,13 @@ html { height: 100%; } +// Prevent potential for layout shifts on a page with fixed 100% height. This +// can happen, for example, with the Grammarly extension in Firefox. +html.fixed-size-document { + position: fixed; + width: 100%; +} + body { font-family: @font-family-base; font-size: @font-size-base;