fix: kanban board horizontal scroll (#1038)

* 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

View File

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