diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx index 24d9b3ac4..1c5c3eac9 100644 --- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx +++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx @@ -35,10 +35,10 @@ import { ListableContentItem } from './Types/ListableContentItem' import { FeatureName } from '@/Controllers/FeatureName' import { PanelResizedData } from '@/Types/PanelResizedData' import { useForwardedRef } from '@/Hooks/useForwardedRef' -import { isMobileScreen } from '@/Utils' import FloatingAddButton from './FloatingAddButton' import FilesTableView from '../FilesTableView/FilesTableView' import { FeaturesController } from '@/Controllers/FeaturesController' +import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery' type Props = { accountMenuController: AccountMenuController @@ -181,8 +181,10 @@ const ContentListView = forwardRef( } }, [isFilesSmartView, filesController, createNewNote, toggleAppPane, application]) + const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm) const isFilesTableViewEnabled = application.features.isExperimentalFeatureEnabled(FeatureIdentifier.FilesTableView) - const shouldShowFilesTableView = isFilesTableViewEnabled && selectedTag?.uuid === SystemViewId.Files + const shouldShowFilesTableView = + isFilesTableViewEnabled && !isMobileScreen && selectedTag?.uuid === SystemViewId.Files useEffect(() => { const searchBarElement = document.getElementById(ElementIds.SearchBar) @@ -301,7 +303,7 @@ const ContentListView = forwardRef( aria-label={'Notes & Files'} ref={innerRef} > - {isMobileScreen() && ( + {isMobileScreen && ( )}
@@ -321,7 +323,7 @@ const ContentListView = forwardRef( itemListController={itemListController} /> )} - {(!shouldShowFilesTableView || isMobileScreen()) && ( + {(!shouldShowFilesTableView || isMobileScreen) && ( (null) const isDailyEntry = isTag(selectedTag) && selectedTag.isDailyEntry + const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm) const matchesMd = useMediaQuery(MediaQueryBreakpoints.md) const isTouchScreen = !useMediaQuery(MediaQueryBreakpoints.pointerFine) const isTablet = matchesMd && isTouchScreen @@ -106,12 +106,12 @@ const ContentListHeader = ({ }, [addButtonLabel, addNewItem, filesController, isDailyEntry, isFilesSmartView]) const SearchBarButton = useMemo(() => { - if (!isFilesSmartView || !isFilesTableViewEnabled || isMobileScreen()) { + if (!isFilesSmartView || !isFilesTableViewEnabled || isMobileScreen) { return null } return - }, [isFilesSmartView, isFilesTableViewEnabled, itemListController]) + }, [isFilesSmartView, isFilesTableViewEnabled, isMobileScreen, itemListController]) const FolderName = useMemo(() => { return (