From 54da3212cb9073d085912bc92cc4b476cdb090f0 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 14:05:59 +0200
Subject: [PATCH] Add an independent scroll for each column

---
 app/ui/invitations/board.tsx | 68 ++++++++++++++++++------------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index c151cbc..36f8fda 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -25,48 +25,48 @@ export default function InvitationsBoard({ guests, invitations }: {
   }
 
   return (
-    <div className="flex h-full">
+    <div className="flex h-screen">
       {/* Left Column: Guests */}
-      <div className="w-1/4 h-full overflow-y-auto border-r border-gray-300 p-4">
-        <h2 className="text-lg font-semibold mb-4">Guests</h2>
-        <ul>
-          {availableGuests.map((guest, index) => (
-            <li
-              key={index}
-              className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
-              draggable="true"
-            >
-              <h3 className="text-md font-medium">{guest.name}</h3>
-            </li>
-          ))}
-        </ul>
+      <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
+      <h2 className="text-lg font-semibold mb-4">Guests</h2>
+      <ul>
+        {availableGuests.map((guest, index) => (
+        <li
+          key={index}
+          className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
+          draggable="true"
+        >
+          <h3 className="text-md font-medium">{guest.name}</h3>
+        </li>
+        ))}
+      </ul>
       </div>
 
       {/* Right Column: Invitations */}
-      <div className="w-3/4 h-full overflow-y-auto p-4">
-        <h2 className="text-lg font-semibold mb-4">Invitations</h2>
+      <div className="w-3/4 h-full overflow-auto p-4">
+      <h2 className="text-lg font-semibold mb-4">Invitations</h2>
 
-        <button
-          onClick={handleCreateInvitation}
-          className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      <button
+        onClick={handleCreateInvitation}
+        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      >
+        Create New Invitation
+      </button>
+
+      <div className="grid grid-cols-3 gap-4">
+        {invitations.map((invitation, index) => (
+        <div
+          key={invitation.id}
+          className="flex items-center justify-center h-32 w-full bg-green-600 border border-green-700"
         >
-          Create New Invitation
-        </button>
-
-        <div className="grid grid-cols-3 gap-4">
-          {invitations.map((invitation, index) => (
-            <div
-              key={invitation.id}
-              className="flex items-center justify-center h-32 w-full bg-green-600 border border-green-700"
-            >
-              <ul className="text-center text-yellow-500 font-cursive text-lg">
-                {invitation.guests.map((guest) => (
-                  <li key={guest.id}>{guest.name}</li>
-                ))}
-              </ul>
-            </div>
+          <ul className="text-center text-yellow-500 font-cursive text-lg">
+          {invitation.guests.map((guest) => (
+            <li key={guest.id}>{guest.name}</li>
           ))}
+          </ul>
         </div>
+        ))}
+      </div>
       </div>
     </div>
   );