thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: kanban board horizontal scroll (#1038)

Browse Source 
* fix: kanban board horizontal scroll

* chore: droppable placeholder position
This commit is contained in:
Aaryan Khandelwal 2023-05-12 12:41:31 +05:30 committed by GitHub
parent 6a78948113
commit bf865f399f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/app/components/core/board-view/single-board.tsx
View File

@ -66,8 +66,7 @@ export const SingleBoard: React.FC<Props> = ({
}, [currentState]); }, [currentState]);
return ( return (
<div className={`h-full flex-shrink-0 ${!isCollapsed ? "" : "w-96"}`}> <div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
<div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3"}`}>
<BoardHeader <BoardHeader
addIssueToState={addIssueToState} addIssueToState={addIssueToState}
currentState={currentState} currentState={currentState}
@ -80,9 +79,9 @@ export const SingleBoard: React.FC<Props> = ({
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}> <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
{(provided, snapshot) => ( {(provided, snapshot) => (
<div <div
className={`relative h-full overflow-y-auto p-1 ${ className={`relative h-full ${
snapshot.isDraggingOver ? "bg-brand-base/20" : "" orderBy !== "sort_order" && snapshot.isDraggingOver ? "bg-brand-base/20" : ""
} ${!isCollapsed ? "hidden" : "block"}`} } ${!isCollapsed ? "hidden" : "flex flex-col"}`}
ref={provided.innerRef} ref={provided.innerRef}
{...provided.droppableProps} {...provided.droppableProps}
> >
@ -105,6 +104,7 @@ export const SingleBoard: React.FC<Props> = ({
</div> </div>
</> </>
)} )}
<div className="overflow-y-auto pt-3">
{groupedByIssues?.[groupTitle].map((issue, index) => ( {groupedByIssues?.[groupTitle].map((issue, index) => (
<Draggable <Draggable
key={issue.id} key={issue.id}
@ -146,10 +146,12 @@ export const SingleBoard: React.FC<Props> = ({
> >
{provided.placeholder} {provided.placeholder}
</span> </span>
</div>
<div>
{type === "issue" ? ( {type === "issue" ? (
<button <button
type="button" type="button"
className="flex items-center gap-2 font-medium text-brand-accent outline-none" className="flex items-center gap-2 font-medium text-brand-accent outline-none p-1"
onClick={addIssueToState} onClick={addIssueToState}
> >
<PlusIcon className="h-4 w-4" /> <PlusIcon className="h-4 w-4" />
@ -182,10 +184,10 @@ export const SingleBoard: React.FC<Props> = ({
) )
)} )}
</div> </div>
</div>
)} )}
</StrictModeDroppable> </StrictModeDroppable>
)} )}
</div> </div>
</div>
); );
}; };