Merge pull request #4838 from weseek/feat/80234-82470-adjust-item-pos-when-selected

Feat/80234 82470 adjust item pos when selected

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

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

packages/app/src/styles/_search.scss

@@ -182,12 +182,12 @@
     .nav.nav-pills {
       > .page-list-li {
         &.active {
-          padding-right: 5px;
+          // add this negative margin to avoid inner elements of .page-list-li.active
+          // moving to right side by border-left's px size.
+          margin-left: -3px;
           border-left: solid 3px transparent;
         }
         > a {
-          height: 123px;
-          padding: 2px 4px;
           word-break: break-all;
 
           &:hover {