fixing list scroll issues when search is fixed

Author: Kayla Wilkins

src/components/2_molecules/search-header.js

@@ -43,8 +43,8 @@ class SearchHeader extends React.Component {
         `}
         render={data => (
           <header
-            className={`md:mb-4 searchHeader ${
-              searchIsFixed ? "searchHeader--fixed" : ""
+            className={`md:mb-4 search-header ${
+              searchIsFixed ? "search-header--fixed" : ""
             }`}
           >
             <Search searchIndex={data.siteSearchIndex.index} />

src/components/2_molecules/search.js

@@ -23,30 +23,30 @@ export default class Search extends Component {
           onChange={this.search}
           placeholder="Search"
         />
-        <ul className="p-0 bg-white">
+        <ul className="p-0 search-results-list">
           {this.state.results.map((n, i) => {
             const { query } = this.state;
             return (
               <div key={i}>
                 {n.getSummary &&
                   n.getSummary.toLowerCase().includes(query.toLowerCase()) && (
-                    <li className="list-reset">
+                    <li className="list-reset p-1 md:p-0">
                       <Link to={`/api/v4/${_.kebabCase(n.name)}`}>
                         {n.getSummary}
                       </Link>
                     </li>
                   )}
                 {n.postSummary &&
                   n.postSummary.toLowerCase().includes(query.toLowerCase()) && (
-                    <li className="list-reset">
+                    <li className="list-reset p-1 md:p-0">
                       <Link to={`/api/v4/${_.kebabCase(n.name)}/#post`}>
                         {n.postSummary}
                       </Link>
                     </li>
                   )}
                 {n.putSummary &&
                   n.putSummary.toLowerCase().includes(query.toLowerCase()) && (
-                    <li className="list-reset">
+                    <li className="list-reset p-1 md:p-0">
                       <Link to={`/api/v4/${_.kebabCase(n.name)}/#put`}>
                         {n.putSummary}
                       </Link>
@@ -56,7 +56,7 @@ export default class Search extends Component {
                   n.deleteSummary
                     .toLowerCase()
                     .includes(query.toLowerCase()) && (
-                    <li className="list-reset">
+                    <li className="list-reset p-1 md:p-0">
                       <Link to={`/api/v4/${_.kebabCase(n.name)}/#delete`}>
                         {n.deleteSummary}
                       </Link>

src/css/components/4_pages/api-page.css

@@ -105,21 +105,32 @@
   @apply border-grey-light;
 }
 
-.searchHeader {
+.search-header {
   position: relative;
   top: 0;
   width: auto;
   transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);
 }
 
-.searchHeader.searchHeader--fixed {
+.search-header.search-header--fixed {
   position: fixed;
   top: 65px;
   left: 0;
   width: 100%;
   z-index: 1;
 }
 
+.search-results-list {
+  background-color: #fff;
+}
+
+.search-header--fixed .search-results-list {
+  max-height: 250px;
+  height: 100%;
+  overflow-y: scroll;
+  box-shadow: 0px 5px 8px -2px rgba(0, 0, 0, 0.5);
+}
+
 @screen md {
   .api-content-wrapper {
     margin-left: 300px;
@@ -148,4 +159,9 @@
     width: 300px;
     padding: 2rem;
   }
+
+  .search-results-list {
+    box-shadow: none;
+    background-color: none;
+  }
 }