Fix app layout issues

src/components/VAudioTrack/VWaveform.vue

@@ -90,7 +90,7 @@
     <!-- Focus bar -->
     <div
       v-if="isInteractive"
-      class="focus-indicator hidden absolute z-30 top-0 flex flex-col items-center justify-between bg-black h-full"
+      class="focus-indicator hidden absolute z-20 top-0 flex flex-col items-center justify-between bg-black h-full"
       :style="{ width: `${barWidth}px`, left: `${progressBarWidth}px` }"
     >
       <div

src/components/VFilters/VSearchGridFilter.vue

@@ -2,7 +2,7 @@
   <section
     id="filters"
     aria-labelledby="filters-heading"
-    class="filters py-8 px-10 min-h-full md:bg-dark-charcoal-06"
+    class="filters py-8 px-10"
   >
     <div class="flex items-center justify-between mt-2 mb-6">
       <h4 id="filters-heading" class="text-sr font-semibold py-2 uppercase">
@@ -109,14 +109,3 @@ export default {
   },
 }
 </script>
-<style scoped>
-.filters {
-  border-inline-start: 1px solid transparent;
-}
-@screen md {
-  .filters {
-    /* dark-charcoal-20*/
-    border-inline-start: 1px solid #d6d4d5;
-  }
-}
-</style>

src/components/VHeader/VHeader.vue

@@ -1,14 +1,12 @@
 <template>
   <header
-    class="main-header flex px-4 md:px-7 items-center md:items-stretch z-40 w-screen bg-white gap-x-2 gap-y-4"
+    class="main-header flex px-4 py-3 md:py-4 md:px-7 items-center md:items-stretch z-30 w-full bg-white justify-between gap-x-2 gap-y-4"
     :class="{
-      'py-3 ': isHeaderScrolled,
-      'py-4 flex-wrap md:flex-nowrap': !isHeaderScrolled,
+      'flex-wrap md:flex-nowrap': !isHeaderScrolled,
       'border-b border-white': !isHeaderScrolled && !isMenuOpen,
       'border-b border-dark-charcoal-20':
         isSearchRoute && (isHeaderScrolled || isMenuOpen),
-      'justify-between': isSearchRoute,
-      'justify-between md:justify-start': !isSearchRoute,
+      'md:justify-start': !isSearchRoute,
       'flex-nowrap': !isSearchRoute && isHeaderScrolled,
     }"
   >
@@ -24,13 +22,12 @@
       :size="isMinScreenMd ? 'medium' : isHeaderScrolled ? 'small' : 'large'"
       :class="{
         'order-4 md:order-none w-full md:w-auto': !isHeaderScrolled,
-        'search-bar-mobile-scrolled': isSearchRoute && isHeaderScrolled,
       }"
       @submit="handleSearch"
     >
       <span
         v-show="searchStatus"
-        class="hidden lg:block info font-semibold text-xs text-dark-charcoal-70 group-hover:text-dark-charcoal group-focus:text-dark-charcoal mx-4"
+        class="hidden lg:block info font-semibold text-xs text-dark-charcoal-70 group-hover:text-dark-charcoal group-focus:text-dark-charcoal mx-4 whitespace-nowrap"
       >
         {{ searchStatus }}
       </span>
@@ -81,7 +78,7 @@ const menus = {
   CONTENT_SWITCHER: 'content-switcher',
 }
 
-const VHeader = defineComponent({
+export default defineComponent({
   name: 'VHeader',
   components: {
     VLogoButton,
@@ -231,6 +228,4 @@ const VHeader = defineComponent({
     }
   },
 })
-
-export default VHeader
 </script>

src/components/VHeader/VHeaderFilter.vue

@@ -83,19 +83,22 @@ export default {
     watch([visibleRef], ([visible]) => {
       triggerA11yProps['aria-expanded'] = visible
       filterSidebar.setVisibility(visible)
-      if (!isMinScreenMd) {
-        visible ? lock() : unlock()
-      }
     })
 
     const open = () => {
       visibleRef.value = true
       emit('open')
+      if (!isMinScreenMd.value) {
+        lock()
+      }
     }
 
     const close = () => {
       visibleRef.value = false
       emit('close')
+      if (!isMinScreenMd.value) {
+        unlock()
+      }
     }
 
     const onTriggerClick = () => {

src/components/VHeader/VSearchBar/VSearchButton.vue

@@ -4,7 +4,7 @@
     :aria-label="$t('search.search')"
     size="disabled"
     :variant="isIcon ? 'plain' : 'primary'"
-    class="transition-none inline-block rounded-s-none font-semibold text-2xl hover:text-white group-hover:text-white group-hover:border-pink hover:bg-pink group-hover:bg-pink focus-visible:ring focus-visible:ring-pink"
+    class="transition-none flex-shrink-0 rounded-s-none font-semibold text-2xl hover:text-white group-hover:text-white group-hover:border-pink hover:bg-pink group-hover:bg-pink focus-visible:ring focus-visible:ring-pink"
     :class="[
       isIcon
         ? 'search-button focus-visible:bg-pink focus-visible:text-white p-[0.5px] ps-[1.5px]'

src/components/VHeader/VSidebarContent.vue

@@ -1,7 +1,7 @@
 <template>
-  <VTeleport v-if="visible" :to="to"
-    ><VSearchGridFilter @close="$emit('close')"
-  /></VTeleport>
+  <VTeleport v-if="visible" :to="to">
+    <VSearchGridFilter @close="$emit('close')" />
+  </VTeleport>
 </template>
 
 <script>

src/components/VInputField/VInputField.vue

@@ -14,7 +14,7 @@
       :id="fieldId"
       v-bind="$attrs"
       :type="type"
-      class="flex-1 leading-none font-semibold bg-tx placeholder-dark-charcoal-70 ms-4 h-full appearance-none rounded-none focus:outline-none text-2xl md:text-base"
+      class="w-full leading-none font-semibold bg-tx placeholder-dark-charcoal-70 ms-4 h-full appearance-none rounded-none focus:outline-none text-2xl md:text-base"
       :value="modelValue"
       :aria-label="labelText"
       @input="updateModelValue"

src/components/VMigrationNotice.vue

@@ -16,8 +16,9 @@
         <VLink
           class="text-white font-bold underline"
           href="https://wordpress.org/news/2021/05/welcome-to-openverse/"
-          >{{ $t('migration-notice.read') }}</VLink
         >
+          {{ $t('migration-notice.read') }}
+        </VLink>
       </template>
     </i18n>
   </VNotificationBanner>

src/components/VModal/VModalContent.vue

@@ -3,7 +3,7 @@
     <!-- Prevent FocusTrap from trying to focus the first element. We already do that in a more flexible, adaptive way in our Dialog composables. -->
     <FocusTrap :initial-focus="() => false">
       <div
-        class="flex justify-center z-10 fixed inset-0 bg-dark-charcoal bg-opacity-75 min-h-screen overflow-y-auto"
+        class="flex justify-center z-40 fixed inset-0 bg-dark-charcoal bg-opacity-75 min-h-screen overflow-y-auto"
       >
         <div
           ref="dialogRef"

src/components/VNotificationBanner.vue

@@ -5,7 +5,7 @@
     :class="$style[variant]"
     :data-testid="`banner-${id}`"
   >
-    <p class="text-left">
+    <p class="leading-tight md:leading-normal text-sr md:text-base text-left">
       <slot name="default" />
     </p>
     <div class="flex">
@@ -87,5 +87,6 @@ export default defineComponent({
 
 .announcement {
   @apply bg-trans-blue text-white;
+  border-left: 0.25rem solid transparent;
 }
 </style>

src/components/VScrollButton.vue

@@ -20,29 +20,24 @@
 </template>
 
 <script>
-import { computed } from '@nuxtjs/composition-api'
+import { computed, defineComponent } from '@nuxtjs/composition-api'
 
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
 
 const positionWithoutSidebar = 'ltr:right-4 rtl:left-4'
 const positionWithSidebar = 'ltr:right-[21rem] rtl:left-[21rem]'
-export default {
+
+export default defineComponent({
   name: 'VScrollButton',
   setup() {
     const { isVisible: isFilterVisible } = useFilterSidebarVisibility()
     const hClass = computed(() =>
       isFilterVisible.value ? positionWithSidebar : positionWithoutSidebar
     )
-    return { hClass, isFilterVisible }
-  },
-  methods: {
-    scrollToTop() {
-      this.$el.parentElement.scrollTo({
-        top: 0,
-        left: 0,
-        behavior: 'smooth',
-      })
-    },
+    const scrollToTop = () => {
+      window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+    }
+    return { hClass, isFilterVisible, scrollToTop }
   },
-}
+})
 </script>

src/components/VSearchGrid.vue

@@ -8,13 +8,10 @@
   >
     <header
       v-if="query.q && supported"
-      class="mt-4"
+      class="mt-5"
       :class="isAllView ? 'mb-10' : 'mb-8'"
     >
-      <VSearchResultsTitle
-        class="leading-10"
-        :size="isAllView ? 'large' : 'default'"
-      >
+      <VSearchResultsTitle :size="isAllView ? 'large' : 'default'">
         {{ query.q }}
       </VSearchResultsTitle>
     </header>

src/composables/use-window-scroll.js

@@ -13,7 +13,7 @@ import { useEventListener } from '~/composables/use-event-listener'
  *
  * @type {import('@nuxtjs/composition-api').Ref<boolean>}
  */
-const isWindowScrolled = ref(false)
+const isScrolled = ref(false)
 
 /**
  *
@@ -30,7 +30,7 @@ export function useWindowScroll({
     return {
       x: ref(0),
       y: ref(0),
-      isWindowScrolled,
+      isScrolled,
     }
   }
 
@@ -40,7 +40,7 @@ export function useWindowScroll({
   const scrollHandler = () => {
     x.value = window.pageXOffset
     y.value = window.pageYOffset
-    isWindowScrolled.value = y.value > 0
+    isScrolled.value = y.value > 0
   }
 
   const handler = throttleMs
@@ -52,5 +52,5 @@ export function useWindowScroll({
     passive: true,
   })
 
-  return { x, y, isWindowScrolled }
+  return { x, y, isScrolled }
 }