Fix homepage layout shift (#4816)

* Fix homepage layout shift Signed-off-by: Olga Bulat <[email protected]> * Update snapshots Signed-off-by: Olga Bulat <[email protected]> * Disable animations and hide cursor (caret) by default Signed-off-by: Olga Bulat <[email protected]> * Remove full height Signed-off-by: Olga Bulat <[email protected]> * Update snapshots Signed-off-by: Olga Bulat <[email protected]> --------- Signed-off-by: Olga Bulat <[email protected]>
WordPress · Aug 28, 2024 · adeb2dd · adeb2dd
1 parent d1bd9bc
commit adeb2dd
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/frontend/src/components/VHomeGallery/VHomeGallery.vue b/frontend/src/components/VHomeGallery/VHomeGallery.vue
@@ -72,10 +72,7 @@ const imageCount = computed(() => columnCount.value * rowCount)
 
 <template>
   <!-- Wrapper element to center the grid if space is more than 5 columns. -->
-  <div
-    ref="el"
-    class="mx-10 me-12 flex flex-row items-center justify-end 2xl:justify-center"
-  >
+  <div ref="el" class="flex-row items-center justify-end 2xl:justify-center">
     <!-- Image grid only occupies as much width as needed. -->
     <div
       class="home-gallery inline-grid grid-flow-col grid-rows-3 gap-8"

diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
@@ -78,7 +78,7 @@ const handleSearch = (searchTerm: string) => {
 
 <template>
   <main
-    class="index flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 px-6 sm:px-0 lg:flex-row lg:items-center lg:gap-0"
+    class="index flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 px-6 sm:px-0 lg:flex-row lg:items-center lg:justify-between lg:gap-0"
   >
     <VHomepageContent
       class="sm:px-14 md:px-20 lg:px-26 xl:w-[53.375rem] xl:pe-0"
@@ -88,7 +88,7 @@ const handleSearch = (searchTerm: string) => {
     />
 
     <!-- Image carousel -->
-    <VHomeGallery v-if="isXl" class="flex h-full flex-grow" />
+    <VHomeGallery v-if="isXl" class="mx-10 me-12 flex h-full flex-grow" />
   </main>
 </template>
 

diff --git a/frontend/test/playwright/utils/breakpoints.ts b/frontend/test/playwright/utils/breakpoints.ts
@@ -51,10 +51,20 @@ interface Options {
    * @defaultValue true
    */
   uaMocking?: boolean
+  /**
+   * Disable animations to remove flakiness.
+   */
+  animations: "disabled"
+  /**
+   * To make sure caret blinking doesn't cause diffs.
+   */
+  caret: "hide"
 }
 
 const defaultOptions = Object.freeze({
   uaMocking: true,
+  animations: "disabled",
+  caret: "hide",
 })
 
 const makeBreakpointDescribe =