From 5b0ef233c44f2512b8683b1492d1915845ace9c5 Mon Sep 17 00:00:00 2001
From: Guus <ghligtvoet@gmail.com>
Date: Tue, 19 Aug 2025 00:29:17 +0200
Subject: [PATCH] update vote boxes

---
 frontend/src/app/lobby/page.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/lobby/page.tsx b/frontend/src/app/lobby/page.tsx
index 458f4f6..84e9ae2 100644
--- a/frontend/src/app/lobby/page.tsx
+++ b/frontend/src/app/lobby/page.tsx
@@ -296,8 +296,8 @@ export default function Lobby() {
         </div>
 
         <div className="flex flex-col items-center justify-center">
-          <div className="flex flex-row items-center justify-center gap-x-32">
-            <div className="grid min-w-52 grid-flow-row grid-cols-3 items-start justify-start gap-4 rounded bg-blue-950/80 p-4">
+          <div className="flex flex-row items-center justify-center gap-x-36">
+            <div className="grid min-h-[516px] min-w-[516px] grid-flow-row grid-cols-3 place-items-center items-start justify-center gap-4 rounded bg-blue-950/80 px-4 pt-10">
               {noList.map((user) => (
                 <div
                   key={user.id}
@@ -306,8 +306,8 @@ export default function Lobby() {
                   <img
                     src={user.avatar}
                     alt={user.name}
-                    width={75}
-                    height={75}
+                    width={100}
+                    height={100}
                   />
                   <div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white">
                     {user.name}
@@ -334,7 +334,7 @@ export default function Lobby() {
                 />
               </div>
             )}
-            <div className="grid min-w-52 grid-flow-row grid-cols-3 items-start justify-start gap-4 rounded bg-blue-950/80 p-4">
+            <div className="grid min-h-[516px] min-w-[516px] grid-flow-row grid-cols-3 place-items-center items-start justify-center gap-4 rounded bg-blue-950/80 px-4 pt-10">
               {yesList.map((user) => (
                 <div
                   key={user.id}
@@ -343,8 +343,8 @@ export default function Lobby() {
                   <img
                     src={user.avatar}
                     alt={user.name}
-                    width={75}
-                    height={75}
+                    width={100}
+                    height={100}
                   />
                   <div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white">
                     {user.name}
@@ -382,7 +382,9 @@ export default function Lobby() {
           )}
         </div>
 
-        <div className="flex flex-row items-start justify-start gap-10 rounded bg-blue-950/80 p-4">
+        <div
+          className={`flex min-h-33 min-w-1 flex-row items-start justify-start gap-10 rounded p-4 ${userList.some((u) => !u.hidden) ? "bg-blue-950/80" : "bg-transparent p-0"} `}
+        >
           {userList.map((user) => (
             <div
               key={user.id}