Add vertical extra space to search results (pushing pagination to bottom)

src/components/PaginationLinks/PaginationLinks.css

@@ -100,6 +100,9 @@
   border-bottom-style: solid;
   border-bottom-width: 3px;
   border-bottom-color: var(--matterColorDark);
+
+  /* Color */
+  color: var(--matterColorDark);
 }
 
 .paginationGap {

src/components/SearchResultsPanel/SearchResultsPanel.css

@@ -1,6 +1,9 @@
 @import '../../marketplace.css';
 
-.root {}
+.root {
+  display: flex;
+  flex-direction: column;
+}
 
 .listingCards {
   padding: 0 24px 24px 24px;
@@ -11,6 +14,7 @@
 }
 
 .pagination {
+  margin-top: auto;
   background-color: var(--matterColorLight);
   padding: 0 24px;
 }

src/components/SearchResultsPanel/__snapshots__/SearchResultsPanel.test.js.snap

@@ -1,4 +1,6 @@
 exports[`SearchResultsPanel matches snapshot 1`] = `
 <div
-  className="" />
+  className="">
+  <div />
+</div>
 `;

src/containers/SearchPage/SearchPage.css

@@ -3,6 +3,8 @@
 .container {
   /* Layout */
   width: 100%;
+  flex-grow: 1;
+  display: flex;
 }
 
 .searchResultSummary {
@@ -18,4 +20,12 @@
   white-space: nowrap;
 }
 
-.listings {}
+.listings {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.searchListingsPanel {
+  flex-grow: 1;
+}

src/containers/SearchPage/SearchPage.js

@@ -90,6 +90,7 @@ export const SearchPageComponent = props => {
       <div className={css.container}>
         <div className={css.listings}>
           <SearchResultsPanel
+            className={css.searchListingsPanel}
             currencyConfig={config.currencyConfig}
             listings={listingsAreLoaded ? listings : []}
             pagination={listingsAreLoaded ? pagination : null}