Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-19 05:09:43 +02:00
Code Issues Releases Activity

fix: Prevent list with multiline title from overflowing board view

Browse source 
Closes #377
This commit is contained in:
Maksim Eltyshev 2024-11-17 23:37:43 +01:00
parent 71d0815891
commit 1a70b2b7e6
2 changed files with 6 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

12
client/src/components/List/List.jsx
View file

@ -32,7 +32,7 @@ const List = React.memo(
const [isAddCardOpened, setIsAddCardOpened] = useState(false); const [isAddCardOpened, setIsAddCardOpened] = useState(false);
const nameEdit = useRef(null); const nameEdit = useRef(null);
const listWrapper = useRef(null); const cardsWrapper = useRef(null);
const handleHeaderClick = useCallback(() => { const handleHeaderClick = useCallback(() => {
if (isPersisted && canEdit) { if (isPersisted && canEdit) {
@ -67,7 +67,7 @@ const List = React.memo(
useEffect(() => { useEffect(() => {
if (isAddCardOpened) { if (isAddCardOpened) {
listWrapper.current.scrollTop = listWrapper.current.scrollHeight; cardsWrapper.current.scrollTop = cardsWrapper.current.scrollHeight;
} }
}, [cardIds, isAddCardOpened]); }, [cardIds, isAddCardOpened]);
@ -133,13 +133,7 @@ const List = React.memo(
</ActionsPopup> </ActionsPopup>
)} )}
</div> </div>
<div <div ref={cardsWrapper} className={styles.cardsInnerWrapper}>
ref={listWrapper}
className={classNames(
styles.cardsInnerWrapper,
(isAddCardOpened || !canEdit) && styles.cardsInnerWrapperFull,
)}
>
<div className={styles.cardsOuterWrapper}>{cardsNode}</div> <div className={styles.cardsOuterWrapper}>{cardsNode}</div>
</div> </div>
{!isAddCardOpened && canEdit && ( {!isAddCardOpened && canEdit && (

8
client/src/components/List/List.module.scss
View file

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