Fix app layout issues

src/components/VFilters/VSearchGridFilter.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="filters py-8 px-10 min-h-full md:bg-dark-charcoal-06"
-    data-testid="filters-list"
-  >
+  <div class="filters py-8 px-10" data-testid="filters-list">
     <div class="flex items-center justify-between mt-2 mb-6">
       <h4 class="text-sr font-semibold py-2 uppercase">
         {{ $t('filter-list.filter-by') }}
@@ -108,14 +105,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,6 +1,6 @@
 <template>
   <header
-    class="flex px-4 md:px-7 items-center md:items-stretch z-40 w-screen bg-white gap-x-2 gap-y-4"
+    class="flex px-4 md:px-7 items-center md:items-stretch z-40 w-full bg-white gap-x-2 gap-y-4"
     :class="{
       'py-3 ': isHeaderScrolled,
       'py-4 flex-wrap md:flex-nowrap': !isHeaderScrolled,
@@ -30,7 +30,7 @@
     >
       <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>

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/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 }
 }

src/layouts/default.vue

@@ -1,17 +1,16 @@
 <template>
-  <div class="app grid h-screen overflow-hidden relative">
-    <div>
+  <div class="app grid relative">
+    <div class="sticky top-0 block z-40">
       <VTeleportTarget name="skip-to-content" :force-destroy="true" />
       <VMigrationNotice v-show="isReferredFromCc" />
       <VTranslationStatusBanner />
       <VHeader />
     </div>
-    <main
-      class="main embedded overflow-x-hidden"
-      :class="{ 'has-sidebar': isSidebarVisible }"
-    >
-      <Nuxt ref="mainContentRef" class="min-w-0 main-page" />
-      <VSidebarTarget class="sidebar" />
+    <main class="main embedded" :class="{ 'has-sidebar': isSidebarVisible }">
+      <Nuxt class="min-w-0 main-page" />
+      <VSidebarTarget
+        class="sidebar fixed pb-20 end-0 bg-dark-charcoal-06 border-s border-dark-charcoal-20 overflow-y-auto"
+      />
     </main>
     <VModalTarget class="modal" />
     <VGlobalAudioSection />
@@ -20,7 +19,7 @@
 <script>
 import { computed, provide, ref, watch } from '@nuxtjs/composition-api'
 
-import { useScroll } from '~/composables/use-scroll'
+import { useWindowScroll } from '~/composables/use-window-scroll'
 import { useMatchSearchRoutes } from '~/composables/use-match-routes'
 import { isMinScreen } from '~/composables/use-media-query'
 import { useFilterSidebarVisibility } from '~/composables/use-filter-sidebar-visibility'
@@ -51,9 +50,6 @@ const embeddedPage = {
     return this.$nuxtI18nHead({ addSeoAttributes: true, addDirAttribute: true })
   },
   setup() {
-    const mainContentRef = ref(null)
-    const mainRef = ref(null)
-
     const navStore = useNavStore()
     const isReferredFromCc = computed(() => navStore.isReferredFromCc)
 
@@ -67,13 +63,12 @@ const embeddedPage = {
 
     const isHeaderScrolled = ref(false)
     const scrollY = ref(0)
-    const { isScrolled: isMainContentScrolled, y: mainContentY } =
-      useScroll(mainContentRef)
+    const { isScrolled: isMainContentScrolled, y: windowY } = useWindowScroll()
     watch([isMainContentScrolled], ([isMainContentScrolled]) => {
       isHeaderScrolled.value = isMainContentScrolled
     })
-    watch([mainContentY], ([mainContentY]) => {
-      scrollY.value = mainContentY
+    watch([windowY], ([windowY]) => {
+      scrollY.value = windowY
     })
     const showScrollButton = computed(() => scrollY.value > 70)
 
@@ -92,14 +87,20 @@ const embeddedPage = {
       isSidebarVisible,
       isSearchRoute,
       headerHasTwoRows,
-      mainContentRef,
-      mainRef,
     }
   },
 }
 export default embeddedPage
 </script>
+
 <style scoped>
+.sidebar {
+  height: calc(100vh - var(--header-height, 81px));
+}
+.has-sidebar .sidebar {
+  width: 325px;
+}
+
 .app {
   grid-template-rows: auto 1fr;
 }
@@ -111,7 +112,6 @@ export default embeddedPage
     display: grid;
     grid-template-columns: 1fr 336px;
   }
-
   /** Make the main content area span both grid columns when the sidebar is closed... **/
   .main > *:first-child {
     grid-column: span 2;
@@ -121,12 +121,4 @@ export default embeddedPage
     grid-column: 1;
   }
 }
-
-.main {
-  overflow: hidden;
-}
-.main > *:not(:empty) {
-  overflow-y: scroll;
-  height: 100%;
-}
 </style>

src/locales/po-files/openverse.pot

@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-04-14T15:48:23+00:00\n"
+"POT-Creation-Date: 2022-04-14T20:32:00+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -808,7 +808,7 @@ msgctxt "browse-page.search-rating.feedback-thanks"
 msgid "Thank you for the feedback!"
 msgstr ""
 
-#: src/components/VFilters/VSearchGridFilter.vue:8
+#: src/components/VFilters/VSearchGridFilter.vue:5
 msgctxt "filter-list.filter-by"
 msgid "Filter by"
 msgstr ""
@@ -817,12 +817,12 @@ msgctxt "filter-list.hide"
 msgid "Hide filters"
 msgstr ""
 
-#: src/components/VFilters/VSearchGridFilter.vue:17
+#: src/components/VFilters/VSearchGridFilter.vue:14
 msgctxt "filter-list.clear"
 msgid "Clear filters"
 msgstr ""
 
-#: src/components/VFilters/VSearchGridFilter.vue:36
+#: src/components/VFilters/VSearchGridFilter.vue:33
 msgctxt "filter-list.show"
 msgid "Show results"
 msgstr ""