Fix for Scrolling in FlexSearch #13

colinwilson · Aug 14, 2023 · f126cd8 · f126cd8
1 parent af54580
commit f126cd8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/assets/docs/scss/custom/plugins/flexsearch/_flexsearch.scss b/assets/docs/scss/custom/plugins/flexsearch/_flexsearch.scss
@@ -29,7 +29,7 @@
 }
 
 #FlexSearchCollapse {
-        transition: 0.05s ease;    
+        transition: 0.05s ease;
         width: fit-content;
 }
 
@@ -113,7 +113,7 @@
     height: 18px;
     justify-content: center;
     margin-right: .4em;
-    padding: 0 0 2px 0;
+    padding: 0;
     position: relative;
     border: 0;
     width: 20px;
@@ -153,10 +153,24 @@
     position: absolute;
     background-color: var(--flexsearch-suggestion-bg-color);
     left: 0;
+    max-height: 70vh;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    &::-webkit-scrollbar {
+        width: 5px;
+    }
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: rgba(155, 155, 155, 0.5);
+        border-radius: 2px;
+        border: transparent;
+    }
     margin-top: 0.5rem;
     // width: calc(100vw - 0.3rem);
     max-width: calc(100vw - 0.15rem);
-    z-index: 1000
+    z-index: 999
 }
 
 @media (min-width: 768px) {

diff --git a/layouts/partials/docs/top-header.html b/layouts/partials/docs/top-header.html
@@ -36,7 +36,7 @@
                                     <svg width="44" height="15"><path d="M2.118,11.5A1.519,1.519,0,0,1,1,11.042,1.583,1.583,0,0,1,1,8.815a1.519,1.519,0,0,1,1.113-.458h.715V6.643H2.118A1.519,1.519,0,0,1,1,6.185,1.519,1.519,0,0,1,.547,5.071,1.519,1.519,0,0,1,1,3.958,1.519,1.519,0,0,1,2.118,3.5a1.519,1.519,0,0,1,1.114.458A1.519,1.519,0,0,1,3.69,5.071v.715H5.4V5.071A1.564,1.564,0,0,1,6.976,3.5,1.564,1.564,0,0,1,8.547,5.071,1.564,1.564,0,0,1,6.976,6.643H6.261V8.357h.715a1.575,1.575,0,0,1,1.113,2.685,1.583,1.583,0,0,1-2.227,0A1.519,1.519,0,0,1,5.4,9.929V9.214H3.69v.715a1.519,1.519,0,0,1-.458,1.113A1.519,1.519,0,0,1,2.118,11.5Zm0-.857a.714.714,0,0,0,.715-.714V9.214H2.118a.715.715,0,1,0,0,1.429Zm4.858,0a.715.715,0,1,0,0-1.429H6.261v.715a.714.714,0,0,0,.715.714ZM3.69,8.357H5.4V6.643H3.69ZM2.118,5.786h.715V5.071a.714.714,0,0,0-.715-.714.715.715,0,0,0-.5,1.22A.686.686,0,0,0,2.118,5.786Zm4.143,0h.715a.715.715,0,0,0,.5-1.22.715.715,0,0,0-1.22.5Z" fill="currentColor"></path><path d="M12.4,11.475H11.344l3.879-7.95h1.056Z" fill="currentColor"></path><path d="M25.073,5.384l-.864.576a2.121,2.121,0,0,0-1.786-.923,2.207,2.207,0,0,0-2.266,2.326,2.206,2.206,0,0,0,2.266,2.325,2.1,2.1,0,0,0,1.782-.918l.84.617a3.108,3.108,0,0,1-2.622,1.293,3.217,3.217,0,0,1-3.349-3.317,3.217,3.217,0,0,1,3.349-3.317A3.046,3.046,0,0,1,25.073,5.384Z" fill="currentColor"></path><path d="M30.993,5.142h-2.07v5.419H27.891V5.142h-2.07V4.164h5.172Z" fill="currentColor"></path><path d="M34.67,4.164c1.471,0,2.266.658,2.266,1.851,0,1.087-.832,1.809-2.134,1.855l2.107,2.691h-1.28L33.591,7.87H33.07v2.691H32.038v-6.4Zm-1.6.969v1.8h1.572c.832,0,1.22-.3,1.22-.918s-.411-.882-1.22-.882Z" fill="currentColor"></path><path d="M42.883,10.561H38.31v-6.4h1.033V9.583h3.54Z" fill="currentColor"></path></svg>
                                 </kbd>
                                 <kbd class="flexsearch-button-key">
-                                    /
+                                    <svg width="15" height="15"><path d="M5.926,12.279H4.41L9.073,2.721H10.59Z" fill="currentColor"/></svg>
                                 </kbd>
                             </span>
                         </div>