fix(web): content & navigation list scroll on mobile (#1207)

packages/web/src/javascripts/Components/ContentListView/ContentList.tsx

@@ -12,6 +12,7 @@ import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NotesController } from '@/Controllers/NotesController'
 import { ElementIds } from '@/Constants/ElementIDs'
+import { classNames } from '@/Utils/ConcatenateClassNames'
 
 type Props = {
   application: WebApplication
@@ -66,7 +67,11 @@ const ContentList: FunctionComponent<Props> = ({
 
   return (
     <div
-      className="infinite-scroll focus:shadow-none focus:outline-none"
+      className={classNames(
+        'infinite-scroll overflow-y-auto overflow-x-hidden focus:shadow-none focus:outline-none',
+        'md:overflow-y-hidden md:hover:overflow-y-auto',
+        'md:hover:[overflow-y:_overlay]',
+      )}
       id={ElementIds.ContentList}
       onScroll={onScroll}
       onKeyDown={onKeyDown}

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

@@ -19,6 +19,7 @@ import { ElementIds } from '@/Constants/ElementIDs'
 import ContentListHeader from './Header/ContentListHeader'
 import ResponsivePaneContent from '../ResponsivePane/ResponsivePaneContent'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
+import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 
 type Props = {
   accountMenuController: AccountMenuController
@@ -43,6 +44,8 @@ const ContentListView: FunctionComponent<Props> = ({
   notesController,
   selectionController,
 }) => {
+  const { toggleAppPane } = useResponsiveAppPane()
+
   const itemsViewPanelRef = useRef<HTMLDivElement>(null)
 
   const {
@@ -65,13 +68,14 @@ const ContentListView: FunctionComponent<Props> = ({
     [navigationController.selected?.uuid],
   )
 
-  const addNewItem = useCallback(() => {
+  const addNewItem = useCallback(async () => {
     if (isFilesSmartView) {
       void filesController.uploadNewFile()
     } else {
-      void createNewNote()
+      await createNewNote()
+      toggleAppPane(AppPaneId.Editor)
     }
-  }, [filesController, createNewNote, isFilesSmartView])
+  }, [isFilesSmartView, filesController, createNewNote, toggleAppPane])
 
   useEffect(() => {
     /**
@@ -84,7 +88,7 @@ const ContentListView: FunctionComponent<Props> = ({
       modifiers: [KeyboardModifier.Meta, KeyboardModifier.Ctrl],
       onKeyDown: (event) => {
         event.preventDefault()
-        addNewItem()
+        void addNewItem()
       },
     })
 
@@ -170,7 +174,7 @@ const ContentListView: FunctionComponent<Props> = ({
   return (
     <div
       id="items-column"
-      className="sn-component section app-column app-column-second border-b border-solid border-border"
+      className="sn-component section app-column app-column-second flex flex-col border-b border-solid border-border"
       aria-label={'Notes & Files'}
       ref={itemsViewPanelRef}
     >