Todo description now shows up in a modal

src/components/todoStuff/todoCard.js

@@ -27,7 +27,7 @@ export default function TodoCard(props) {
             backgroundColor: categories[category].color,
             color: 'white',
             borderRadius: '2px',
-            padding: '0px 2px',
+            padding: '2px 4px',
           }}
         >
           {categories[category].name}

src/components/todoStuff/todoSidebar.js

@@ -25,9 +25,9 @@ export default function Todos({
   // TODO: hide vote button if not voteable
   return (
     <div className={styles.container}>
-      <div className={styles.name}>
+      <div className={styles.title}>
         <span className={styles.id}>#{id}</span>
-        {name}
+        <div className={styles.name}>{name}</div>
         <span
           style={{
             margin: '0px 5px',
@@ -35,7 +35,7 @@ export default function Todos({
             backgroundColor: categories[category].color,
             color: 'white',
             borderRadius: '2px',
-            padding: '0px 2px',
+            padding: '2px 4px',
             whiteSpace: 'nowrap',
           }}
         >
@@ -74,7 +74,10 @@ export default function Todos({
       {description && (
         <>
           <div className={styles.title}>Leírás</div>
-          <div dangerouslySetInnerHTML={{ __html: description }} />
+          <div
+            className={styles.description}
+            dangerouslySetInnerHTML={{ __html: description }}
+          />
           <hr />
         </>
       )}

src/components/todoStuff/todoSidebar.module.css

@@ -13,10 +13,13 @@
   font-size: 18px;
 }
 
-.name {
+.title {
   color: var(--text-color);
   font-size: 20px;
-  margin: 20px 0px;
+  margin: 5px 0px;
+}
+
+.name {
 }
 
 .category {
@@ -30,6 +33,13 @@
   color: #999;
 }
 
+.description {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  max-height: calc(38vh);
+  margin: 5px;
+}
+
 .row {
   display: flex;
   justify-content: space-between;

src/components/todoStuff/todos.js

@@ -4,8 +4,7 @@ import LoadingIndicator from '../LoadingIndicator.js'
 import TodoBoard from './todoBoard.js'
 import TodoTable from './todoTable.js'
 import TodoSidebar from './todoSidebar.js'
-
-import Sidebar from '../sidebar.js'
+import Modal from '../modal.js'
 
 import styles from './todo.module.css'
 // import styles from './todos.module.css'
@@ -140,8 +139,8 @@ export default function Todos() {
   return (
     <div>
       {sidebarCard && (
-        <Sidebar
-          onClose={() => {
+        <Modal
+          closeClick={() => {
             setSidebarCard(null)
           }}
         >
@@ -165,15 +164,10 @@ export default function Todos() {
                 })
             }}
           />
-        </Sidebar>
+        </Modal>
       )}
       {renderGrouper()}
-      <div
-        style={{
-          // width: '100%',
-          marginRight: sidebarCard ? 380 : 0,
-        }}
-      >
+      <div>
         <TodoBoard
           columns={cols}
           cards={bCards}