fix(hitl2): scrollable HandoffList (#4624)

* fix(hitl2): scrollable HandoffList * removed unused import * removed white space
botpress · Mar 11, 2021 · 31f4bc7 · 31f4bc7
1 parent 1ddbae0
commit 31f4bc7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/modules/hitlnext/src/views/full/app/components/HandoffList.tsx b/modules/hitlnext/src/views/full/app/components/HandoffList.tsx
@@ -10,6 +10,7 @@ import { Context } from '../Store'
 import HandoffItem from './HandoffItem'
 import HandoffListHeader, { FilterType, SortType } from './HandoffListHeader'
 
+import style from '../../style.scss'
 interface Props {
   handoffs: object
   loading: boolean
@@ -63,6 +64,16 @@ const HandoffList: FC<Props> = ({ handoffs, loading }) => {
     setItems(filtered)
   }, [filterOptions, sortOption, handoffs, loading])
 
+  const displayHandoffList = () => {
+    return (
+      <div className={style.handoffList}>
+        {items.map(handoff => (
+          <HandoffItem key={handoff.id} {...handoff}></HandoffItem>
+        ))}
+      </div>
+    )
+  }
+
   return (
     <Fragment>
       <HandoffListHeader
@@ -79,7 +90,7 @@ const HandoffList: FC<Props> = ({ handoffs, loading }) => {
         <EmptyState icon={<CasesIcon />} text={lang.tr('module.hitlnext.handoffs.empty')}></EmptyState>
       )}
 
-      {!loading && !_.isEmpty(items) && items.map(handoff => <HandoffItem key={handoff.id} {...handoff}></HandoffItem>)}
+      {!loading && !_.isEmpty(items) && displayHandoffList()}
     </Fragment>
   )
 }

diff --git a/modules/hitlnext/src/views/full/style.scss b/modules/hitlnext/src/views/full/style.scss
@@ -300,7 +300,7 @@
 
   .handoffList {
     background-color: var(--bg);
-    display: flex;
+    overflow-y: scroll;
     flex-direction: column;
     flex-grow: 1;
     height: 100%;