From f9fea3b72ec9ee5df6e2ad9568d92a7a07ab8344 Mon Sep 17 00:00:00 2001
From: Ou <orongxing@gmail.com>
Date: Thu, 27 Mar 2025 00:11:38 +0800
Subject: [PATCH] fix: render card on a very narrow screen

---
 src/components/column/dnd.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/column/dnd.tsx b/src/components/column/dnd.tsx
index dbe2b6f..d12f777 100644
--- a/src/components/column/dnd.tsx
+++ b/src/components/column/dnd.tsx
@@ -7,6 +7,7 @@ import { createPortal } from "react-dom"
 import { useThrottleFn } from "ahooks"
 import { useAutoAnimate } from "@formkit/auto-animate/react"
 import { motion } from "framer-motion"
+import { useWindowSize } from "react-use"
 import { DndContext } from "../common/dnd"
 import { useSortable } from "../common/dnd/useSortable"
 import type { ItemsProps } from "./card"
@@ -14,10 +15,16 @@ import { CardWrapper } from "./card"
 import { currentSourcesAtom } from "~/atoms"
 
 const AnimationDuration = 200
+const WIDTH = 350
 export function Dnd() {
   const [items, setItems] = useAtom(currentSourcesAtom)
   const [parent] = useAutoAnimate({ duration: AnimationDuration })
   useEntireQuery(items)
+  const { width } = useWindowSize()
+  const minWidth = useMemo(() => {
+    // double padding = 32
+    return Math.min(width - 32, WIDTH)
+  }, [width])
 
   return (
     <DndWrapper items={items} setItems={setItems}>
@@ -25,7 +32,7 @@ export function Dnd() {
         className="grid w-full gap-6"
         ref={parent}
         style={{
-          gridTemplateColumns: "repeat(auto-fill, minmax(350px, 1fr))",
+          gridTemplateColumns: `repeat(auto-fill, minmax(${minWidth}px, 1fr))`,
         }}
         initial="hidden"
         animate="visible"