fix(styles): ensure search results visibility (#2063)

Fixed an issue where the sticky positioning of the version selector and search bar caused the search results container to be cut off Signed-off-by: Bart Smykla <[email protected]>
kumahq · Nov 5, 2024 · 6e1b4fc · 6e1b4fc
1 parent 754c941
commit 6e1b4fc
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 20 deletions.
diff --git a/app/_assets/styles/custom/components/_sidebar.scss b/app/_assets/styles/custom/components/_sidebar.scss
@@ -44,12 +44,6 @@ $sidebar-button-left-spacing: 1.5rem;
   .nav-links {
     display: block;
   }
-
-  .sidebar-top-section {
-    padding-bottom: 1rem;
-    background: #fff;
-    mask-image: linear-gradient(to bottom, #fff 90%, transparent);
-  }
 }
 
 .sidebar-links {
@@ -106,7 +100,8 @@ a.sidebar-link {
     top: 0;
     z-index: 1;
     padding-top: $navbarHeight;
-    padding-bottom: 3rem;
+    width: 100%;
+    background-color: #fff;
   }
 
   .theme-container.no-sidebar .sidebar {

diff --git a/app/_assets/styles/custom/components/_version-nav.scss b/app/_assets/styles/custom/components/_version-nav.scss
@@ -2,7 +2,7 @@
 // Version navigation
 // 
 
-$version-nav-padding: 1.563rem 1.563rem 0 1.563rem;
+$version-nav-padding: 1.5rem 1.5rem 0 1.5rem;
 $version-nav-select-color: $color-5;
 $version-nav-select-font: $base-mono-family;
 

diff --git a/app/_assets/styles/vuepress-core/algolia-search.scss b/app/_assets/styles/vuepress-core/algolia-search.scss
@@ -1,6 +1,7 @@
 .search-box {
-    padding: 1.563rem 1.563rem 0 1.563rem;
+  padding: 1.5rem 1.5rem 0 1.5rem;
 }
+
 .search-box input {
   font-size: $base-font-size;
   font-family: $monospace;

diff --git a/app/_assets/styles/vuepress-core/sidebar.scss b/app/_assets/styles/vuepress-core/sidebar.scss
@@ -22,8 +22,7 @@
     }
   }
   & > .sidebar-links {
-    padding: 1.5rem 0;
-    margin-top: -3rem;
+    padding: 1rem 0;
 
     & > li > a.sidebar-link {
       font-size: 1.1em;
@@ -44,9 +43,5 @@
         top: calc(1rem - 2px);
       }
     }
-    & > .sidebar-links {
-      padding: 1rem 0;
-      margin-top: -1rem;
-    }
   }
 }
diff --git a/app/_includes/sidebar.html b/app/_includes/sidebar.html
@@ -8,11 +8,9 @@
       {% include version_selector.html name="doc-version-selector" %}
     </form>
 
-    <div class="nav-item">
-      <form id="search-form" class="algolia-search-wrapper search-box" role="search">
-        <input id="algolia-search-input" class="search-query" placeholder="Search...">
-      </form>
-    </div>
+    <form id="search-form" class="algolia-search-wrapper search-box" role="search">
+      <input id="algolia-search-input" class="search-query" placeholder="Search...">
+    </form>
   </div>
   {%- endif %}