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

@@ -1236,6 +1236,7 @@ const ProjectController = {
               detachRole,
               metadata: { viewport: false },
               showUpgradePrompt,
+              fixedSizeDocument: true,
             })
             timer.done()
           }

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 || {}
 

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;