adjust layout

src/client/js/components/SearchPage/SearchResultList.jsx

@@ -16,8 +16,8 @@ class SearchResultList extends React.Component {
   render() {
     const resultList = this.props.pages.map((page) => {
       return (
-        <div id={page._id} key={page._id} className="search-result-page">
-          <h2 className="inline"><a href={page.path}>{page.path}</a></h2>
+        <div id={page._id} key={page._id} className="search-result-page mb-5">
+          <h2><a href={page.path}>{page.path}</a></h2>
           { page.tags.length > 0 && (
             <span><i className="tag-icon icon-tag"></i> {page.tags.join(', ')}</span>
           )}

src/client/styles/scss/_search.scss

@@ -148,7 +148,7 @@
       padding-right: 0;
 
       &.affix {
-        top: 58px;
+        top: 64px;
         width: 33%;
         height: 100%;
         padding-right: 5px;
@@ -188,9 +188,8 @@
       margin-top: -48px;
 
       > h2 {
-        display: inline;
         margin-right: 10px;
-        font-size: 20px;
+        font-size: 22px;
         line-height: 1em;
       }
 
@@ -212,7 +211,10 @@
   position: sticky;
   top: 0;
   z-index: 99;
-  padding: 10px 0;
+
+  // for sticky layout
+  padding-top: 15px;
+  margin-bottom: 15px;
 
   .input-group-btn .btn {
     height: 34px;

src/server/views/search.html

@@ -14,7 +14,7 @@
 <div class="container-fluid">
 
   <div class="row">
-    <div id="main" class="main m-t-15 col-md-12 search-page">
+    <div id="main" class="main col-md-12 search-page">
       <div class="" id="search-page"></div>
     </div>
   </div>