Added scroll offset to ensure visibility of fields when typing. Fix #7777 (#12759)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -28,6 +28,7 @@ Changelog
  * Populate the ImageBlock alt text from the image’s default alt text when selecting a new image (Matt Westcott)
  * Prevent main menu from re-rendering when clicking outside while the menu is closed (Sage Abdullah)
  * Fill in the ImageBlock alt text from the image’s default alt text when converting from ImageChooserBlock (Cynthia Kiser)
+ * Make sure typing text at the bottom of the page editor always scrolls enough to keep the text into view (Jatin Bhardwaj)
  * Fix: Improve handling of translations for bulk page action confirmation messages (Matt Westcott)
  * Fix: Ensure custom rich text feature icons are correctly handled when provided as a list of SVG paths (Temidayo Azeez, Joel William, LB (Ben) Johnston)
  * Fix: Ensure manual edits to `StreamField` values do not throw an error (Stefan Hammer)

CONTRIBUTORS.md

@@ -868,6 +868,7 @@
 * Rishabh Sharma
 * Mike Gifford
 * Stéphane Blondon
+* Jatin Bhardwaj
 
 ## Translators
 

client/scss/components/_grid.legacy.scss

@@ -14,21 +14,23 @@
 }
 
 /**
- * Increase the scroll offset to account for pages with a sticky header.
+ * Increase the scroll offset to account for pages with sticky areas - header or footer.
  * We apply this to all pages for simplicity.
  */
-@mixin slim-header-scroll-offset() {
+@mixin sticky-areas-scroll-offset() {
   $gap: theme('spacing.4');
   // For mobile viewports, expect a sticky header over two rows.
   scroll-padding-top: calc(theme('spacing.slim-header') * 2 + $gap);
 
   @include media-breakpoint-up(sm) {
     scroll-padding-top: calc(theme('spacing.slim-header') + $gap);
+    // Increase the scroll offset to account for pages with sticky bottom button
+    scroll-padding-bottom: 100px;
   }
 }
 
 .content-wrapper {
-  @include slim-header-scroll-offset();
+  @include sticky-areas-scroll-offset();
   scroll-behavior: smooth;
   width: 100%;
   height: 100%; // this has no effect on desktop, but on mobile it helps aesthetics of menu popout action

docs/releases/6.4.md

@@ -65,6 +65,7 @@ Thank you to Matt Westcott, Thibaud Colas, and Cynthia Kiser for their work on t
  * Add support for specifying an operator on `Fuzzy` queries (Tom Usher)
  * Remove support for Safari 15 (Thibaud Colas)
  * Prevent main menu from re-rendering when clicking outside while the menu is closed (Sage Abdullah)
+ * Make sure typing text at the bottom of the page editor always scrolls enough to keep the text into view (Jatin Bhardwaj)
 
 ### Bug fixes