Fix scrollbar

Fixed creepyface fix
MozillaFoundation · Nov 4, 2021 · fd1e8a2 · fd1e8a2
1 parent 747b2cf
commit fd1e8a2
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 16 deletions.
diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/pni_mobile_nav.html b/network-api/networkapi/wagtailpages/templates/buyersguide/pni_mobile_nav.html
@@ -1,7 +1,7 @@
 {% load bg_nav_tags localization i18n static wagtailroutablepage_tags %}
 
 <!-- TODO: Replace this with the multipage-nav-mobile once we change that from a react component to a vanilla one -->
-<div class="d-md-none mt-0" id="pni-nav-mobile">
+<div class="d-md-none mt-0 mb-0" id="pni-nav-mobile">
     <div class="container">
         <div class="row px-3 px-sm-0">
             <div class="col-12">

diff --git a/source/js/buyers-guide/search.js b/source/js/buyers-guide/search.js
@@ -27,8 +27,9 @@ const SearchFilter = {
       );
     }
 
-    const searchInput = (SearchFilter.searchInput =
-      searchBar.querySelector(`input`));
+    const searchInput = (SearchFilter.searchInput = searchBar.querySelector(
+      `input`
+    ));
 
     searchInput.addEventListener(`input`, (evt) => {
       const searchText = searchInput.value.trim();
@@ -332,14 +333,6 @@ const SearchFilter = {
           inline: "start",
         });
     }
-
-    const mediaQuery = window.matchMedia("(min-width: 576px)");
-    if (mediaQuery.matches) {
-      // We cannot override scrollbar stylings so we have to remove the classname on large screens (at least on chrome)
-      document
-        .querySelector(".subcategory-header")
-        .classList.remove("tw-scrollbar");
-    }
   },
 
   clearCategories: () => {
@@ -372,8 +365,9 @@ const SearchFilter = {
       document.querySelector(".category-header").href = document.querySelector(
         `#multipage-nav a[data-name="${parent}"]`
       ).href;
-      document.querySelector(`#pni-nav-mobile .active-link-label`).textContent =
-        parent;
+      document.querySelector(
+        `#pni-nav-mobile .active-link-label`
+      ).textContent = parent;
     } else {
       const header = category === "None" ? "All" : category;
       document.querySelector(".category-header").textContent = header;

diff --git a/source/sass/buyers-guide/views/catalog.scss b/source/sass/buyers-guide/views/catalog.scss
@@ -2,7 +2,7 @@ body.catalog {
   $hero-breakpoint: $bp-lg;
   $breakpoint: $bp-md;
 
-  --sticky-height: 90px;
+  --sticky-height: 73px;
   --creep-o-height: 10px;
   --expanded-sticky-height: calc(11em + var(--creep-o-height));
   --small-sticky-height: calc(var(--expanded-sticky-height) - 6em);
@@ -322,7 +322,7 @@ body.catalog {
     z-index: 3;
     position: relative;
     top: 42px;
-    padding: 1rem 0;
+    margin: 2rem 0 1rem;
     top: initial;
     z-index: 10;
 
@@ -332,6 +332,8 @@ body.catalog {
 
     &.creep-o-meter-moved {
       height: 80px;
+      margin-bottom: 0;
+      margin-top: 1rem;
 
       @media (max-width: $bp-md) {
         height: 16px;
@@ -346,7 +348,6 @@ body.catalog {
       display: flex;
       height: var(--sticky-height);
       align-items: center;
-      padding-top: initial;
 
       &.creep-o-meter-moved {
         height: var(--sticky-height);