selected list border

packages/app/src/components/SearchPage/SearchPageLayout.tsx

@@ -37,7 +37,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
           </div>
 
           <div className="page-list">
-            <ul className="page-list-ul page-list-ul-flat nav nav-pills"><SearchResultList></SearchResultList></ul>
+            <ul className="page-list-ul page-list-ul-flat pl-3 nav nav-pills"><SearchResultList></SearchResultList></ul>
           </div>
         </div>
         <div className="flex-grow-1 flex-basis-0 d-none d-lg-block search-result-content">

packages/app/src/components/SearchPage/SearchResultListItem.tsx

@@ -87,9 +87,9 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   };
 
   return (
-    <li key={pageData._id} className="page-list-li search-page-item w-100  px-4 list-group-item-action">
+    <li key={pageData._id} className={`page-list-li search-page-item w-100 list-group-item-action ${isSelected ? 'active' : ''}`}>
       <a
-        className={`d-block pt-3 ${isSelected ? 'active' : ''}`}
+        className="d-block pt-3"
         href={pageId}
         onClick={() => onClickInvoked(pageData._id)}
       >

packages/app/src/styles/_search.scss

@@ -177,6 +177,10 @@
 
     .nav.nav-pills {
       > .page-list-li {
+        &.active {
+          padding-right: 5px;
+          border-left: solid 3px transparent;
+        }
         > a {
           height: 123px;
           padding: 2px 4px;
@@ -185,10 +189,6 @@
             color: inherit;
             text-decoration: none;
           }
-          &.active {
-            padding-right: 5px;
-            border-left: solid 3px transparent;
-          }
           > * {
             margin-right: 3px;
           }

packages/app/src/styles/theme/_apply-colors.scss

@@ -594,7 +594,7 @@ body.pathname-sidebar {
         background-color: $bgcolor-keyword-highlighted;
       }
       .page-list-ul {
-        .page-list-li > a.active {
+        .active {
           background-color: $bgcolor-search-item-active;
           border-color: $bordercolor-search-item-left-active;
         }