Set layout height to 100dvh with fallback to 100vh

src/components/VFourOhFour.vue

@@ -2,7 +2,9 @@
   <div
     class="error relative flex flex-col overflow-x-hidden"
     :class="
-      isNewHeaderEnabled ? 'flex-grow px-6 sm:px-0' : 'min-h-screen bg-yellow'
+      isNewHeaderEnabled
+        ? 'flex-grow px-6 sm:px-0'
+        : 'h-screen h-[100dvh] bg-yellow'
     "
   >
     <svg

src/components/VModal/VInputModal.vue

@@ -3,7 +3,7 @@
     <div v-if="!isActive" class="flex w-full"><slot /></div>
     <VTeleport v-else to="modal">
       <div
-        class="fixed inset-0 z-40 flex min-h-screen w-full justify-center overflow-y-auto bg-white"
+        class="fixed inset-0 z-40 flex h-screen h-[100dvh] w-full justify-center overflow-y-auto bg-white"
       >
         <div
           ref="dialogRef"

src/components/VModal/VModalContent.vue

@@ -1,8 +1,9 @@
 <template>
   <VTeleport v-if="visible" to="modal">
     <div
-      class="fixed inset-0 z-40 flex min-h-screen justify-center overflow-y-auto bg-dark-charcoal bg-opacity-75"
+      class="fixed inset-0 z-40 flex justify-center overflow-y-auto bg-dark-charcoal bg-opacity-75"
       :class="[
+        $style['modal-backdrop'],
         $style[`modal-backdrop-${variant}`],
         $style[`modal-backdrop-${mode}`],
         contentClasses,
@@ -194,7 +195,9 @@ export default defineComponent({
 .top-bar-two-thirds {
   @apply bg-tx;
 }
-
+.modal-backdrop {
+  @apply h-screen h-[100dvh];
+}
 .modal-backdrop-fit-content,
 .modal-backdrop-two-thirds {
   @apply bg-dark-charcoal bg-opacity-75;
@@ -244,4 +247,15 @@ export default defineComponent({
 .modal-content-light {
   @apply bg-white text-dark-charcoal;
 }
+/*
+For mobiles that do not support dvh units, we add a fallback padding
+to the modal content to make sure that no clickable elements are hidden
+by the address bar.
+*/
+@supports not (height: 100dvh) {
+  .modal-content-fit-content,
+  .modal-content-two-thirds {
+    @apply pb-10;
+  }
+}
 </style>

src/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :key="isWhite ? 'white' : 'yellow'"
-    class="app flex min-h-screen flex-col"
+    class="app flex flex-col"
     :class="[
       isDesktopLayout ? 'desktop' : 'mobile',
       isWhite ? 'bg-white' : 'bg-yellow',
@@ -31,7 +31,7 @@
     </div>
 
     <main
-      class="main grid flex-grow"
+      class="main grid h-full flex-grow"
       :class="[
         { 'has-sidebar': isSidebarVisible },
         isSidebarVisible
@@ -46,7 +46,7 @@
         <Nuxt />
         <VFooter
           :mode="isSearchHeader ? 'content' : 'search'"
-          :class="{ 'border-t border-dark-charcoal-20': isWhite }"
+          :class="isWhite ? 'border-t border-dark-charcoal-20' : 'bg-yellow'"
         />
       </div>
       <Nuxt v-else class="main-page flex h-full w-full min-w-0 flex-col" />
@@ -207,9 +207,12 @@ export default {
 </script>
 
 <style scoped>
+.app {
+  @apply h-screen h-[100dvh];
+}
 .sidebar {
   /* Header height above md is 80px plus 1px for bottom border */
-  height: calc(100vh - 81px);
+  @apply h-[calc(100vh-81px)] h-[calc(100dvh-81px)];
 }
 .has-sidebar .sidebar {
   width: var(--filter-sidebar-width);

src/pages/index.vue

@@ -4,7 +4,7 @@
     :class="
       isNewHeaderEnabled
         ? 'flex-grow px-6 sm:px-0'
-        : 'h-screen min-h-screen overflow-hidden bg-yellow'
+        : 'h-screen h-[100dvh] overflow-hidden bg-yellow'
     "
   >
     <VHomepageContent

test/playwright/utils/navigation.ts

@@ -351,13 +351,19 @@ export const goToSearchTerm = async (
   const query = options.query ? `&${options.query}` : ""
   const headerMode = options.headerMode ?? NEW_HEADER
 
+  await setCookies(page.context(), {
+    uiDismissedBanners: [
+      "translation-ru",
+      "translation-en",
+      "translation-ar",
+      "translation-es",
+    ],
+  })
   if (mode === "SSR") {
     const path = `${searchPath(searchType)}?q=${term}${query}`
     await page.goto(pathWithDir(path, dir))
-    await dismissTranslationBanner(page)
   } else {
-    await page.goto(pathWithDir(`/${query}`, dir))
-    await dismissTranslationBanner(page)
+    await page.goto(pathWithDir("/", dir))
     // Select the search type
     if (searchType !== "all") {
       await selectHomepageSearchType(page, searchType, dir, headerMode)

test/playwright/visual-regression/pages/no-results.spec.ts

@@ -11,6 +11,7 @@ import breakpoints from "~~/test/playwright/utils/breakpoints"
 import { supportedSearchTypes } from "~/constants/media"
 
 test.describe.configure({ mode: "parallel" })
+test.describe.configure({ retries: 2 })
 
 for (const searchType of supportedSearchTypes) {
   for (const dir of languageDirections) {