diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
index 04e6c5359c3..c76f12fc823 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
@@ -9,6 +9,7 @@ import { ElementIds } from '@/Constants/ElementIDs'
 import { classNames } from '@standardnotes/utils'
 import { SNTag } from '@standardnotes/snjs'
 import { ItemListController } from '@/Controllers/ItemList/ItemListController'
+import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 
 type Props = {
   application: WebApplication
@@ -25,6 +26,8 @@ const ContentList: FunctionComponent<Props> = ({ application, items, selectedUui
   const { sortBy } = itemListController.displayOptions
   const selectedTag = navigationController.selected
 
+  const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+
   const onScroll: UIEventHandler = useCallback(
     (e) => {
       const offset = NOTES_LIST_SCROLL_THRESHOLD
@@ -83,7 +86,8 @@ const ContentList: FunctionComponent<Props> = ({ application, items, selectedUui
       className={classNames(
         'infinite-scroll overflow-y-auto overflow-x-hidden focus:shadow-none focus:outline-none',
         'md:max-h-full pointer-coarse:md:overflow-y-auto',
-        'flex-grow pb-2',
+        'flex-grow',
+        isMobileScreen ? !itemListController.isMultipleSelectionMode && 'pb-safe-bottom' : 'pb-2',
       )}
       id={ElementIds.ContentList}
       onScroll={onScroll}