feat: horizontal board scrolling

package.json

@@ -53,6 +53,7 @@
     "postcss": "^8.4.27",
     "prettier": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.5.1",
+    "tailwind-scrollbar": "^3.0.5",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6"
   },

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 overflow-hidden py-8 pl-8">{props.children}</div>
+        <div className="w-full overflow-hidden">{props.children}</div>
       </div>
     </main>
   );

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

@@ -140,8 +140,8 @@ export default function BoardPage() {
   };
 
   return (
-    <div>
-      <div className="mb-8 flex w-full justify-between pr-8">
+    <div className="flex h-full flex-col">
+      <div className="flex w-full justify-between p-8">
         <form
           onSubmit={formik.handleSubmit}
           className="focus-visible:outline-none"
@@ -171,7 +171,7 @@ export default function BoardPage() {
         </div>
       </div>
 
-      <div className="overflow-x-scroll overscroll-contain">
+      <div className="scrollbar-thumb-rounded-[4px] scrollbar-track-rounded-[4px] scrollbar-w-none scrollbar-h-[8px] scrollbar scrollbar-thumb-dark-300 scrollbar-track-dark-100 flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain pb-5">
         <DragDropContext onDragEnd={onDragEnd}>
           <Droppable droppableId="all-lists" direction="horizontal" type="LIST">
             {(provided) => (
@@ -180,6 +180,7 @@ export default function BoardPage() {
                 ref={provided.innerRef}
                 {...provided.droppableProps}
               >
+                <div className="min-w-[2rem]" />
                 {boardData?.lists?.map((list: List, index) => (
                   <Draggable
                     key={list.publicId}
@@ -192,7 +193,7 @@ export default function BoardPage() {
                         ref={provided.innerRef}
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
-                        className="mr-5 min-w-[17rem] rounded-md border border-dark-400 bg-dark-200 px-2 py-2"
+                        className="mr-5 min-w-[17rem] max-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">
@@ -243,7 +244,7 @@ export default function BoardPage() {
                     )}
                   </Draggable>
                 ))}
-                <div className="min-w-[0.75rem]"></div>
+                <div className="min-w-[0.75rem]" />
                 {provided.placeholder}
               </div>
             )}

src/app/boards/page.tsx

@@ -12,7 +12,7 @@ export default function BoardsPage() {
   const { openModal } = useModal();
 
   return (
-    <div className="pr-8">
+    <div className="p-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/cards/[...id]/page.tsx

@@ -40,7 +40,7 @@ export default function CardPage() {
   if (!cardId) return <></>;
 
   return (
-    <div>
+    <div className="p-8">
       <div className="mb-8 flex w-full justify-between">
         <form onSubmit={formik.handleSubmit} className="w-full space-y-6">
           <div className="mt-2">

tailwind.config.ts

@@ -26,5 +26,6 @@ export default {
       },
     },
   },
-  plugins: [require("@tailwindcss/forms")],
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-var-requires
+  plugins: [require("@tailwindcss/forms"), require('tailwind-scrollbar')({ nocompatible: true })],
 } satisfies Config;