fix: Prevent list with multiline title from overflowing board view

Closes #377
plankanban · Nov 17, 2024 · 1a70b2b · 1a70b2b
1 parent 71d0815
commit 1a70b2b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 14 deletions.
diff --git a/client/src/components/List/List.jsx b/client/src/components/List/List.jsx
@@ -32,7 +32,7 @@ const List = React.memo(
     const [isAddCardOpened, setIsAddCardOpened] = useState(false);
 
     const nameEdit = useRef(null);
-    const listWrapper = useRef(null);
+    const cardsWrapper = useRef(null);
 
     const handleHeaderClick = useCallback(() => {
       if (isPersisted && canEdit) {
@@ -67,7 +67,7 @@ const List = React.memo(
 
     useEffect(() => {
       if (isAddCardOpened) {
-        listWrapper.current.scrollTop = listWrapper.current.scrollHeight;
+        cardsWrapper.current.scrollTop = cardsWrapper.current.scrollHeight;
       }
     }, [cardIds, isAddCardOpened]);
 
@@ -133,13 +133,7 @@ const List = React.memo(
                   </ActionsPopup>
                 )}
               </div>
-              <div
-                ref={listWrapper}
-                className={classNames(
-                  styles.cardsInnerWrapper,
-                  (isAddCardOpened || !canEdit) && styles.cardsInnerWrapperFull,
-                )}
-              >
+              <div ref={cardsWrapper} className={styles.cardsInnerWrapper}>
                 <div className={styles.cardsOuterWrapper}>{cardsNode}</div>
               </div>
               {!isAddCardOpened && canEdit && (

diff --git a/client/src/components/List/List.module.scss b/client/src/components/List/List.module.scss
@@ -40,7 +40,6 @@
   }
 
   .cardsInnerWrapper {
-    max-height: calc(100vh - 268px);
     overflow-x: hidden;
     overflow-y: auto;
     width: 290px;
@@ -62,10 +61,6 @@
     }
   }
 
-  .cardsInnerWrapperFull {
-    max-height: calc(100vh - 232px);
-  }
-
   .cardsOuterWrapper {
     padding: 0 8px;
     white-space: normal;
@@ -140,6 +135,9 @@
   .outerWrapper {
     background: #dfe3e6;
     border-radius: 3px;
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100vh - 198px);
     overflow: hidden;
   }
 }