Merge pull request #4752 from weseek/feat/80324-82172-selected-page-design

feat/#82172 selected page design

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

@@ -57,7 +57,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-4 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,7 +87,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   };
 
   return (
-    <li key={pageData._id} className={`page-list-li search-page-item w-100 border-bottom px-4 list-group-item-action ${isSelected ? 'active' : ''}`}>
+    <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"
         href={pageId}

packages/app/src/styles/_search.scss

@@ -168,6 +168,8 @@
   }
 }
 
+// TODO : keep the selected list in the same positino as other lists
+// TASK : https://redmine.weseek.co.jp/issues/82470
 .search-result {
   .search-result-list {
     position: sticky;
@@ -177,20 +179,19 @@
 
     .nav.nav-pills {
       > .page-list-li {
+        &.active {
+          padding-right: 5px;
+          border-left: solid 3px transparent;
+        }
         > a {
           height: 123px;
           padding: 2px 4px;
           word-break: break-all;
-          border-radius: 0;
 
           &:hover {
             color: inherit;
             text-decoration: none;
           }
-          &.active {
-            padding-right: 5px;
-            border-left: solid 3px transparent;
-          }
           > * {
             margin-right: 3px;
           }