Fix style issues

JetonDAO · Oct 14, 2024 · cac145d · cac145d
1 parent ca08248
commit cac145d
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 6 deletions.
diff --git a/apps/web/src/app/@modal/(.)create/page.tsx b/apps/web/src/app/@modal/(.)create/page.tsx
@@ -26,6 +26,7 @@ const INITIAL_FORM_VALUES: FormValues = {
   minPlayers: 2,
   minBuyIn: 100,
   maxBuyIn: 1000,
+  maxPlayers: 9,
   waitingTimeout: 3600,
   chipUnit: ChipUnits.apt,
 };

diff --git a/apps/web/src/app/games/[id]/components/GameContainer.tsx b/apps/web/src/app/games/[id]/components/GameContainer.tsx
@@ -5,7 +5,7 @@ export default function GameContainer({ children }: PropsWithChildren) {
     <div
       className={`flex flex-col relative items-center justify-center py-2 bg-[url("/images/pixel-wooden-pattern.png")] bg-repeat bg-center bg-[length:120px_120px] overflow-hidden h-[100dvh] w-[100dvw] z-50 min-h-screen`}
     >
-      {children}
+      <div className="h-full max-w-[2000px] mx-auto w-full relative">{children}</div>
     </div>
   );
 }
diff --git a/apps/web/src/app/games/[id]/components/PlayerActions.tsx b/apps/web/src/app/games/[id]/components/PlayerActions.tsx
@@ -63,7 +63,7 @@ export default function PlayerActions() {
   };
 
   return (
-    <div className="fixed bottom-5 gap-5 left-5 right-5 flex justify-center ">
+    <div className="fixed bottom-5 gap-5 left-5 right-5 flex justify-center max-w-[1000px] mx-auto">
       {actions.map((action) => (
         <button
           key={action}

diff --git a/apps/web/src/app/games/[id]/components/Seat.tsx b/apps/web/src/app/games/[id]/components/Seat.tsx
@@ -124,7 +124,8 @@ export default function Seat({
           }}
         />
         <div className="bg-black/70 shrink-0 flex-col rounded-sm line-clamp-1 relative flex justify-center text-[6px] text-white text-center shadow-2xl md:text-sm px-1 ">
-          <span>{player.id.slice(2, 8)} </span> <span>${player.balance}</span>
+          <span>{seatNumber === 1 ? "me" : player.id.slice(2, 8)} </span>{" "}
+          <span>${player.balance}</span>
         </div>
       </div>
 
@@ -152,7 +153,7 @@ export default function Seat({
               CARDS_MAP[cardName] && (
                 <Card
                   className={`
-                    w-10 sm:w-32  z-50 relative
+                    w-10 sm:w-32 z-50 relative
                     ${
                       i === 0
                         ? "animate-dealAndRotate1"

diff --git a/apps/web/src/components/Modal.tsx b/apps/web/src/components/Modal.tsx
@@ -39,17 +39,18 @@ export default function Modal({
   return (
     <motion.div
       ref={overlay}
-      className="fixed z-50 inset-0 flex justify-center items-center animate-fadeIn"
+      className="fixed w-screen z-50 inset-0 flex justify-center items-center animate-fadeIn h-[100dvh] overflow-auto"
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 0.3 }}
     >
       <div
         ref={wrapper}
         className={cn(
-          `absolute rounded-2xl p-10 bg-[url("/images/wood-pattern-light.png")] pt-12 bg-repeat bg-center bg-[length:200px_200px] border-8 shadow border-[#b87d5b]`,
+          `rounded-2xl p-10 bg-[url("/images/wood-pattern-light.png")] pt-12 overflow-auto max-h-[100dvh] bg-repeat bg-center bg-[length:200px_200px] border-8 shadow border-[#b87d5b]`,
           className,
         )}
+        style={{ transform: "translate(-50%, -50%)" }}
       >
         {closeButton && (
           <button