doc: UX caviat

     Drawers are scrolled differently on mobile and desktop. On the
     desktop, the user can see the header of the drawer (for example
     the search term) and just scroll the results whereas on mobile
     the user can only scroll the whole modal.

src/components/OrgFile/components/AgendaModal/index.js

@@ -144,6 +144,11 @@ function AgendaModal(props) {
 
       <div
         className="agenda__days-container"
+        // On mobile devices, the Drawer already handles the touch
+        // event. Hence, scrolling within the Drawers container does
+        // not work with the same event. Therefore, we're just opting
+        // to scroll the whole drawer. That's not the best UX. And a
+        // better CSS juggler than me is welcome to improve on it.
         style={isMobileBrowser ? undefined : { overflow: 'auto' }}
       >
         {dates.map((date) => (

src/components/OrgFile/components/TaskListModal/index.js

@@ -60,6 +60,11 @@ function TaskListModal(props) {
 
       <div
         className="task-list__headers-container"
+        // On mobile devices, the Drawer already handles the touch
+        // event. Hence, scrolling within the Drawers container does
+        // not work with the same event. Therefore, we're just opting
+        // to scroll the whole drawer. That's not the best UX. And a
+        // better CSS juggler than me is welcome to improve on it.
         style={isMobileBrowser ? undefined : { overflow: 'auto' }}
       >
         <TaskListView