Todo table scroll, clickable columns now stored in server

src/components/todoStuff/todoCard.js

@@ -2,10 +2,8 @@ import React from 'react'
 
 import styles from './todoCard.module.css'
 
-const clickableTypes = ['todo', 'blocked', 'inprogress', 'testing']
-
 export default function TodoCard(props) {
-  const { categories, type, onClick, userId } = props
+  const { categories, type, onClick, userId, clickableTypes } = props
   const { name, description, category, points, votes, id } = props.cardData
   const clickable = clickableTypes.includes(type)
   const voted = votes.includes(userId)

src/components/todoStuff/todoTable.js

@@ -53,7 +53,7 @@ export default function TodoTable() {
   }
 
   return (
-    <div>
+    <div className={styles.tableContainer}>
       <div className={styles.table}>
         {Object.keys(columns).map((key) => {
           const category = columns[key]
@@ -70,6 +70,16 @@ export default function TodoTable() {
                       userId={userId}
                       categories={categories}
                       onClick={onCardClick}
+                      clickableTypes={Object.keys(columns).reduce(
+                        (acc, key) => {
+                          const col = columns[key]
+                          if (col.clickable) {
+                            acc.push(key)
+                          }
+                          return acc
+                        },
+                        []
+                      )}
                     />
                   )
                 } else {

src/components/todoStuff/todoTable.module.css

@@ -1,5 +1,7 @@
 .table {
   display: flex;
+  min-width: 800px;
+  max-height: 600px;
 }
 
 .categoryName {
@@ -14,3 +16,8 @@
 .tableCol {
   flex: 1;
 }
+
+.tableContainer {
+  overflow-x: scroll;
+  overflow-y: scroll;
+}