feat(retro): make columns scrollable instead of page

MaibornWolff · Nov 8, 2023 · f0e1a00 · f0e1a00
1 parent fa1894c
commit f0e1a00
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
@@ -1,5 +1,6 @@
 html {
   height: 100%;
+  overflow-y: hidden;
 }
 
 body {

diff --git a/packages/frontend/src/retro/components/columns/Column.tsx b/packages/frontend/src/retro/components/columns/Column.tsx
@@ -35,20 +35,29 @@ export function Column({ column }: ColumnProps) {
         >
           <ColumnHeader column={column} />
           <Divider />
-          <Droppable droppableId={column.id} type="item" isCombineEnabled={true}>
-            {(providedDroppable) => (
-              <Box
-                flex={1}
-                p={2}
-                sx={{ transition: "background-color 0.2s ease" }}
-                ref={providedDroppable.innerRef}
-                {...providedDroppable.droppableProps}
-              >
-                <Cards column={column} />
-                {providedDroppable.placeholder}
-              </Box>
-            )}
-          </Droppable>
+          <Box
+            sx={{
+              overflowY: "auto",
+            }}
+          >
+            <Droppable droppableId={column.id} type="item" isCombineEnabled={true}>
+              {(providedDroppable) => (
+                <Box
+                  flex={1}
+                  p={2}
+                  minHeight="100%"
+                  sx={{
+                    transition: "background-color 0.2s ease",
+                  }}
+                  ref={providedDroppable.innerRef}
+                  {...providedDroppable.droppableProps}
+                >
+                  <Cards column={column} />
+                  {providedDroppable.placeholder}
+                </Box>
+              )}
+            </Droppable>
+          </Box>
         </Card>
       )}
     </Draggable>