feat: horizontal list scroll

src/app/_components/dashboard.tsx

@@ -58,7 +58,7 @@ export default async function Layout(props: { children: React.ReactNode }) {
             </p>
           </button>
         </nav>
-        <div className="w-full p-8">{props.children}</div>
+        <div className="w-full overflow-hidden py-8 pl-8">{props.children}</div>
       </div>
     </main>
   );

src/app/boards/[...id]/page.tsx

@@ -141,7 +141,7 @@ export default function BoardPage() {
 
   return (
     <div>
-      <div className="mb-8 flex w-full justify-between">
+      <div className="mb-8 flex w-full justify-between pr-8">
         <form
           onSubmit={formik.handleSubmit}
           className="focus-visible:outline-none"
@@ -171,6 +171,7 @@ export default function BoardPage() {
         </div>
       </div>
 
+      <div className="overflow-x-scroll overscroll-contain">
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="all-lists" direction="horizontal" type="LIST">
             {(provided) => (
@@ -191,7 +192,7 @@ export default function BoardPage() {
                         ref={provided.innerRef}
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
-                      className="mr-5 w-72 rounded-md border border-dark-400 bg-dark-200 px-2 py-2"
+                        className="mr-5 min-w-[17rem] rounded-md border border-dark-400 bg-dark-200 px-2 py-2"
                       >
                         <div className="flex justify-between">
                           <p className="mb-4 px-4 pt-1 text-sm font-medium text-dark-1000">
@@ -242,11 +243,13 @@ export default function BoardPage() {
                     )}
                   </Draggable>
                 ))}
+                <div className="min-w-[0.75rem]"></div>
                 {provided.placeholder}
               </div>
             )}
           </Droppable>
         </DragDropContext>
+      </div>
       <Modal>
         {modalContentType === "NEW_CARD" && (
           <NewCardForm listPublicId={selectedPublicListId} />

src/app/boards/page.tsx

@@ -12,7 +12,7 @@ export default function BoardsPage() {
   const { openModal } = useModal();
 
   return (
-    <div>
+    <div className="pr-8">
       <div className="mb-8 flex w-full justify-between">
         <h1 className="font-medium tracking-tight text-dark-1000 sm:text-[1.2rem]">
           Boards

src/app/providers/modal.tsx

@@ -26,7 +26,6 @@ export const ModalProvider: React.FC<Props> = ({ children }) => {
 
   const closeModal = () => {
     setIsOpen(false);
-    setModalContentType("");
   };
 
   return (