add hover style

packages/app/src/client/services/ContextExtractor.tsx

@@ -9,7 +9,7 @@ import {
   useSlackChannels, useNotFoundTargetPathOrId, useIsSearchPage,
 } from '../../stores/context';
 import {
-  useIsDeviceSmallerThanMd,
+  useIsDeviceSmallerThanMd, useIsDeviceSmallerThanLg,
   usePreferDrawerModeByUser, usePreferDrawerModeOnEditByUser, useSidebarCollapsed, useCurrentSidebarContents, useCurrentProductNavWidth,
 } from '~/stores/ui';
 import { IUserUISettings } from '~/interfaces/user-ui-settings';
@@ -124,6 +124,9 @@ const ContextExtractorOnce: FC = () => {
   // Editor
   useSlackChannels(slackChannels);
 
+  // SearchResult
+  useIsDeviceSmallerThanLg();
+
   return null;
 };
 

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

@@ -48,7 +48,7 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
     />
   );
 
-  const responsiveListStyleClass = `${isDeviceSmallerThanLg ? '' : `list-group-item-action ${isSelected ? 'active' : ''}`}`;
+  const responsiveListStyleClass = `${isDeviceSmallerThanLg ? '' : `search-result-list-hover-style list-group-item-action ${isSelected ? 'active' : ''}`}`;
 
   return (
     <li

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

@@ -637,6 +637,9 @@ body.pathname-sidebar {
         }
       }
     }
+    .search-result-list-hover-style:hover {
+      background-color: $bgcolor-search-page-list-hover;
+    }
   }
 
   .search-result-page-title {
@@ -725,11 +728,3 @@ mark.rbt-highlight-text {
     width: 20px;
   }
 }
-
-.search-result {
-  @include media-breakpoint-up(lg) {
-    .page-list-li:hover {
-      background-color: $bgcolor-search-page-list-hover;
-    }
-  }
-}