From 2d6e6328a6d94d115cb2a62d941a6b8940c90ee2 Mon Sep 17 00:00:00 2001
From: Alexandre Bourdin <abourdin@users.noreply.github.com>
Date: Wed, 12 Oct 2022 16:19:18 +0200
Subject: [PATCH] Merge pull request #9890 from
 overleaf/td-grammarly-firefox-layout-shift

Fixed position document element to work around Grammarly-related layout shifts in Firefox

GitOrigin-RevId: 1a69c5d753fbb85f28be50d042e370dd3811278e
---
 services/web/app/src/Features/Project/ProjectController.js | 1 +
 services/web/app/views/layout-base.pug                     | 1 +
 services/web/frontend/stylesheets/core/scaffolding.less    | 7 +++++++
 3 files changed, 9 insertions(+)

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;