shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tweak mobile list snapping

Browse Source
This commit is contained in:
Henry
2026-06-25 16:38:13 +01:00
parent ebb19584a2
commit 120504ab58
3 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/views/board/components/List.tsx
View File

@@ -95,7 +95,7 @@ export default function List({
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] snap-start rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 md:snap-none dark:border-dark-300 dark:bg-dark-100"
className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] snap-start rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-300 dark:bg-dark-100 md:snap-align-none"
>
<div className="mb-2 flex justify-between">
<form
@@ -118,7 +118,7 @@ export default function List({
}
>
<button
className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-light-400 disabled:opacity-60 disabled:cursor-not-allowed dark:hover:bg-dark-200"
className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-light-400 disabled:cursor-not-allowed disabled:opacity-60 dark:hover:bg-dark-200"
onClick={() => openNewCardForm(list.publicId)}
disabled={!canCreateCard}
>

6
apps/web/src/views/board/index.tsx
View File

@@ -634,7 +634,7 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
<div
ref={scrollRef}
onMouseDown={onMouseDown}
className={`scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] z-0 flex-1 snap-x snap-mandatory overflow-y-hidden overflow-x-scroll overscroll-contain scroll-pl-[10px] scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 md:snap-none dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300`}
className={`scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] z-0 flex-1 snap-x snap-mandatory scroll-pl-[10px] overflow-y-hidden overflow-x-scroll overscroll-contain scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300 md:snap-none`}
>
{isLoading ? (
<div className="ml-[2rem] flex">
@@ -685,7 +685,7 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
ref={provided.innerRef}
{...provided.droppableProps}
>
<div className="min-w-[10px]" />
<div className="min-w-[10px] md:min-w-[2rem]" />
{boardData.lists.map((list, index) => (
<List
index={index}
@@ -782,7 +782,7 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
</Droppable>
</List>
))}
<div className="min-w-[0.75rem]" />
<div className="min-w-[calc(100vw-18rem)] md:min-w-[0.75rem]" />
{provided.placeholder}
</div>
)}

8
apps/web/src/views/public/board/index.tsx
View File

@@ -165,7 +165,7 @@ export default function PublicBoardView() {
<div
ref={scrollRef}
onMouseDown={onMouseDown}
className="scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] relative h-full flex-1 snap-x snap-mandatory overflow-y-hidden overflow-x-scroll overscroll-contain scroll-pl-[10px] scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 md:snap-none dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300"
className="scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] relative h-full flex-1 snap-x snap-mandatory scroll-pl-[10px] overflow-y-hidden overflow-x-scroll overscroll-contain scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300 md:snap-none"
>
{isLoading || !router.isReady ? (
<div className="ml-[2rem] flex">
@@ -188,11 +188,11 @@ export default function PublicBoardView() {
</div>
) : (
<div className="flex">
<div className="min-w-[10px]" />
<div className="min-w-[10px] md:min-w-[2rem]" />
{data?.lists.map((list) => (
<div
key={list.publicId}
className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] snap-start rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 md:snap-none dark:border-dark-300 dark:bg-dark-100"
className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] snap-start rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-300 dark:bg-dark-100 md:snap-align-none"
>
<div className="flex justify-between">
<span className="mb-4 block px-4 pt-1 text-sm font-medium text-neutral-900 dark:text-dark-1000">
@@ -234,7 +234,7 @@ export default function PublicBoardView() {
</div>
</div>
))}
<div className="min-w-[0.75rem]" />
<div className="min-w-[calc(100vw-18rem)] md:min-w-[0.75rem]" />
</div>
)}
</div>