fix: Use regular file list on mobile instead of table view

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<HTMLDivElement, Props>(
       }
     }, [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<HTMLDivElement, Props>(
         aria-label={'Notes & Files'}
         ref={innerRef}
       >
-        {isMobileScreen() && (
+        {isMobileScreen && (
           <FloatingAddButton onClick={addNewItem} label={addButtonLabel} style={dailyMode ? 'danger' : 'info'} />
         )}
         <div id="items-title-bar" className="section-title-bar border-b border-solid border-border">
@@ -321,7 +323,7 @@ const ContentListView = forwardRef<HTMLDivElement, Props>(
                 itemListController={itemListController}
               />
             )}
-            {(!shouldShowFilesTableView || isMobileScreen()) && (
+            {(!shouldShowFilesTableView || isMobileScreen) && (
               <SearchBar
                 itemListController={itemListController}
                 searchOptionsController={searchOptionsController}

packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx

@@ -8,12 +8,11 @@ import { NavigationMenuButton } from '@/Components/NavigationMenu/NavigationMenu
 import { isTag, VectorIconNameOrEmoji } from '@standardnotes/snjs'
 import RoundIconButton from '@/Components/Button/RoundIconButton'
 import { AnyTag } from '@/Controllers/Navigation/AnyTagType'
-import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import { MediaQueryBreakpoints, MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import AddItemMenuButton from './AddItemMenuButton'
 import { FilesController } from '@/Controllers/FilesController'
 import SearchButton from './SearchButton'
 import { ItemListController } from '@/Controllers/ItemList/ItemListController'
-import { isMobileScreen } from '@/Utils'
 
 type Props = {
   application: WebApplication
@@ -46,6 +45,7 @@ const ContentListHeader = ({
   const displayOptionsButtonRef = useRef<HTMLButtonElement>(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 <SearchButton itemListController={itemListController} />
-  }, [isFilesSmartView, isFilesTableViewEnabled, itemListController])
+  }, [isFilesSmartView, isFilesTableViewEnabled, isMobileScreen, itemListController])
 
   const FolderName = useMemo(() => {
     return (