change style responsively

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

@@ -46,10 +46,12 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
     />
   );
 
+  const responsiveListStyleClass = `${isDeviceSmallerThanMd ? '' : `list-group-item-action ${isSelected ? 'active' : ''}`}`;
+
   return (
     <li
       key={pageData._id}
-      className={`page-list-li search-result-item list-group-item-action border-bottom ${isSelected && !isDeviceSmallerThanMd ? 'active' : ''}`}
+      className={`w-100 page-list-li search-result-item border-bottom ${responsiveListStyleClass}`}
     >
       <a
         className="d-block h-100"

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

@@ -610,12 +610,9 @@ body.pathname-sidebar {
       }
       .page-list-ul {
         .page-list-li {
-          // change background color and add border whe it's more than md size
-          @include media-breakpoint-up(md) {
-            &.active {
-              background-color: $bgcolor-search-item-active;
-              border-color: $bordercolor-search-item-left-active;
-            }
+          &.active {
+            background-color: $bgcolor-search-item-active;
+            border-color: $bordercolor-search-item-left-active;
           }
         }
       }