Fix mobile homepage jumping

src/components/VHeader/VSearchBar/VSearchBar.vue

@@ -28,7 +28,6 @@
 import { computed, defineComponent, PropType } from '@nuxtjs/composition-api'
 
 import { useMatchHomeRoute } from '~/composables/use-match-routes'
-
 import { defineEvent } from '~/types/emits'
 
 import VInputField, {
@@ -56,7 +55,6 @@ export default defineComponent({
     size: {
       type: String as PropType<keyof typeof FIELD_SIZES>,
       required: true,
-      validator: (v: string) => Object.keys(FIELD_SIZES).includes(v),
     },
     placeholder: {
       type: String,

src/components/VHeader/VSearchBar/VSearchButton.vue

@@ -25,35 +25,26 @@
   </VButton>
 </template>
 
-<script>
-import { defineComponent, computed } from '@nuxtjs/composition-api'
+<script lang="ts">
+import { defineComponent, computed, PropType } from '@nuxtjs/composition-api'
 
 import { isMinScreen } from '~/composables/use-media-query'
 import { useBrowserIsMobile } from '~/composables/use-browser-detection'
 
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VButton from '~/components/VButton.vue'
+import type { FieldSize } from '~/components/VInputField/VInputField.vue'
 
 import searchIcon from '~/assets/icons/search.svg'
 
-/**
- * @typedef Props
- * @property {'small' | 'medium' | 'large' | 'standalone'} size
- * @property {boolean} isHomeRoute
- */
-
 export default defineComponent({
   name: 'VSearchButton',
   components: { VIcon, VButton },
   inheritAttrs: false,
   props: {
     size: {
-      type: String,
+      type: String as PropType<FieldSize>,
       required: true,
-      /**
-       * @param {string} v
-       */
-      validator: (v) => ['small', 'medium', 'large', 'standalone'].includes(v),
     },
     isHomeRoute: {
       type: Boolean,
@@ -84,7 +75,7 @@ export default defineComponent({
             small: ['w-10', 'md:w-12', 'h-10', 'md:h-12'],
             medium: ['w-12', 'h-12'],
             large: ['w-14', 'h-14'],
-            standalone: ['w-14', 'md:w-auto', 'h-14', 'md:h-[69px]'],
+            standalone: ['w-14', 'md:w-auto', 'h-full'],
           }[props.size]
         : undefined
     })

src/components/VInputField/VInputField.vue

@@ -35,8 +35,9 @@ export const FIELD_SIZES = {
   small: 'h-10 text-md',
   medium: 'h-12',
   large: 'h-14',
-  standalone: 'h-14 md:h-[69px]',
+  standalone: 'h-full',
 } as const
+export type FieldSize = keyof typeof FIELD_SIZES
 
 /**
  * Provides a control to enter text as input.

src/pages/index.vue

@@ -43,7 +43,7 @@
         </div>
         <VSearchBar
           v-model.trim="searchTerm"
-          class="max-w-[40rem] mt-4 lg:mt-8 group"
+          class="max-w-[40rem] mt-4 lg:mt-8 group h-[57px] md:h-[69px]"
           size="standalone"
           @submit="handleSearch"
         >
@@ -85,7 +85,7 @@
       <!-- Height is 114.286vh i.e. 100vh * 8/7 (so that 0.75, 1, 1, 0.75 circles are visible) -->
       <!-- Width is 57.143vh i.e. half of height (because grid dimensions are 4 ⨯ 2) -->
       <div
-        class="homepage-images flex flex-row gap-4 lg:gap-0 items-center lg:grid lg:grid-cols-2 lg:grid-rows-4 lg:w-[57.143vh] lg:h-[114.286vh]"
+        class="homepage-images flex flex-row gap-4 lg:gap-0 items-center lg:grid lg:grid-cols-2 lg:grid-rows-4 lg:w-[57.143vh] lg:h-[114.286vh] min-h-[120px]"
         aria-hidden
       >
         <ClientOnly>
@@ -102,9 +102,11 @@
               :style="{ '--transition-index': `${index * 0.05}s` }"
             >
               <img
-                class="object-cover h-full w-full rounded-full"
+                class="object-cover h-full w-full rounded-full aspect-square"
                 :src="image.src"
                 :alt="image.title"
+                width="120"
+                height="120"
                 :title="image.title"
               />
             </VLink>
@@ -131,8 +133,14 @@
   </main>
 </template>
 
-<script>
-import { onMounted, ref, useContext, useRouter } from '@nuxtjs/composition-api'
+<script lang="ts">
+import {
+  defineComponent,
+  onMounted,
+  ref,
+  useContext,
+  useRouter,
+} from '@nuxtjs/composition-api'
 
 import { ALL_MEDIA, supportedSearchTypes } from '~/constants/media'
 import { isMinScreen } from '~/composables/use-media-query'
@@ -150,7 +158,7 @@ import imageInfo from '~/assets/homepage_images/image_info.json'
 import OpenverseLogo from '~/assets/logo.svg?inline'
 import OpenverseBrand from '~/assets/brand.svg?inline'
 
-export default {
+export default defineComponent({
   name: 'HomePage',
   components: {
     OpenverseLogo,
@@ -242,7 +250,7 @@ export default {
       },
     ],
   },
-}
+})
 </script>
 
 <style>