Merge pull request #4947 from weseek/feat/84231-84232-change-breakpoint

84232 change break point

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

@@ -4,7 +4,7 @@ import Clamp from 'react-multiline-clamp';
 
 import { UserPicture, PageListMeta, PagePathLabel } from '@growi/ui';
 import { pagePathUtils, DevidedPagePath } from '@growi/core';
-import { useIsDeviceSmallerThanMd } from '~/stores/ui';
+import { useIsDeviceSmallerThanLg } from '~/stores/ui';
 
 import { IPageSearchResultData } from '../../interfaces/search';
 import PageItemControl from '../Common/Dropdown/PageItemControl';
@@ -28,7 +28,7 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
     page: { pageData, pageMeta }, isSelected, onClickSearchResultItem, onClickCheckbox, isChecked, isEnableActions, shortBody,
   } = props;
 
-  const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
+  const { data: isDeviceSmallerThanLg } = useIsDeviceSmallerThanLg();
 
   const pagePath: DevidedPagePath = new DevidedPagePath(pageData.path, true);
 
@@ -48,7 +48,7 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
     />
   );
 
-  const responsiveListStyleClass = `${isDeviceSmallerThanMd ? '' : `list-group-item-action ${isSelected ? 'active' : ''}`}`;
+  const responsiveListStyleClass = `${isDeviceSmallerThanLg ? '' : `list-group-item-action ${isSelected ? 'active' : ''}`}`;
 
   return (
     <li

packages/app/src/stores/ui.tsx

@@ -154,6 +154,30 @@ export const useIsDeviceSmallerThanMd = (): SWRResponse<boolean|null, Error> =>
   return useStaticSWR(key);
 };
 
+export const useIsDeviceSmallerThanLg = (): SWRResponse<boolean|null, Error> => {
+  const key: Key = isServer ? null : 'isDeviceSmallerThanLg';
+
+  const { cache, mutate } = useSWRConfig();
+
+  if (!isServer) {
+    const lgOrAvobeHandler = function(this: MediaQueryList): void {
+      // md -> lg: matches will be true
+      // lg -> md: matches will be false
+      mutate(key, !this.matches);
+    };
+    const mql = addBreakpointListener(Breakpoint.LG, lgOrAvobeHandler);
+
+    // initialize
+    if (cache.get(key) == null) {
+      document.addEventListener('DOMContentLoaded', () => {
+        mutate(key, !mql.matches);
+      });
+    }
+  }
+
+  return useStaticSWR(key);
+};
+
 export const usePreferDrawerModeByUser = (initialData?: boolean): SWRResponse<boolean, Error> => {
   return useStaticSWR('preferDrawerModeByUser', initialData ?? null, { fallbackData: false });
 };