Fix app layout issues

WordPress · Apr 14, 2022 · 40b83b9 · 40b83b9
1 parent b52e0b4
commit 40b83b9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 33 deletions.
diff --git a/src/components/VFilters/VSearchGridFilter.vue b/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>
diff --git a/src/components/VHeader/VSidebarContent.vue b/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>

diff --git a/src/layouts/default.vue b/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 }"
-    >
+    <main class="main embedded" :class="{ 'has-sidebar': isSidebarVisible }">
       <Nuxt ref="mainContentRef" class="min-w-0 main-page" />
-      <VSidebarTarget class="sidebar" />
+      <VSidebarTarget
+        class="sidebar fixed pb-20 right-0 [calc(100%-81px)] bg-dark-charcoal-06 border-s border-dark-charcoal-20 overflow-y-scroll"
+      />
     </main>
     <VModalTarget class="modal" />
     <VGlobalAudioSection />
@@ -121,12 +120,4 @@ export default embeddedPage
     grid-column: 1;
   }
 }
-
-.main {
-  overflow: hidden;
-}
-.main > *:not(:empty) {
-  overflow-y: scroll;
-  height: 100%;
-}
 </style>