From 0fa644dbc003202af115fe6bf6a5e89816dd9dd8 Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Sat, 29 Nov 2025 03:11:33 +0530
Subject: [PATCH] - Added full-height flex layout with fixed header and
 centered main content. - Locked page scroll via body overflow hidden to
 prevent outer page scrolling. - Moved game content into scrollable middle
 pane. - Removed global top padding from styles.css to match new fixed-header
 layout. - Simplified layout structure and removed unused commented code.

---
 src/tictactoe/TicTacToe.tsx | 115 +++++++++++++++---------------------
 src/tictactoe/styles.css    |   1 -
 2 files changed, 48 insertions(+), 68 deletions(-)

diff --git a/src/tictactoe/TicTacToe.tsx b/src/tictactoe/TicTacToe.tsx
index 4aac9dd..a7e16ec 100644
--- a/src/tictactoe/TicTacToe.tsx
+++ b/src/tictactoe/TicTacToe.tsx
@@ -33,29 +33,17 @@ export default function TicTacToe() {
     }
   }
 
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
+
   useEffect(() => {
     onMatchData(onMatchDataCallback);
   }, [onMatchData]);
 
-  // useEffect(() => {
-  //   let active = true;
-  //
-  //   async function refreshLoop() {
-  //     while (active) {
-  //       const matches = await listOpenMatches();
-  //       setOpenMatches(matches);
-  //
-  //       await new Promise(res => setTimeout(res, 500)); // 0.5s refresh
-  //     }
-  //   }
-  //
-  //   refreshLoop();
-  //
-  //   return () => {
-  //     active = false;
-  //   };
-  // }, [listOpenMatches]);
-
   // ------------------------------------------
   // SEND A MOVE
   // ------------------------------------------
@@ -66,73 +54,66 @@ export default function TicTacToe() {
   }
 
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
+    <div
       style={{
-        minHeight: "100vh",
-        background: "#060606",
-        padding: "30px 0",
-        color: "white",
+        height: "100vh",
         display: "flex",
         flexDirection: "column",
-        alignItems: "center"
+        background: "#060606",
+        color: "white",
+        overflow: "hidden",
       }}
     >
-      {/* Game header bar */}
-      <motion.h1
-        initial={{ opacity: 0, y: -10 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.4 }}
+      {/* ---------------- HEADER (always fixed at top) ---------------- */}
+      <header
         style={{
-          marginBottom: "20px",
-          padding: "10px 20px",
-          background: "rgba(255,255,255,0.03)",
-          borderRadius: "16px",
-          boxShadow: "0 0 20px rgba(255,255,255,0.05)",
-          backdropFilter: "blur(5px)",
+          padding: "16px 20px",
+          background: "rgba(255,255,255,0.04)",
+          borderBottom: "1px solid rgba(255,255,255,0.08)",
+          backdropFilter: "blur(6px)",
+          textAlign: "center",
           fontSize: "26px",
           fontWeight: 700,
           letterSpacing: "1px",
         }}
       >
         Tic Tac Toe Multiplayer
-      </motion.h1>
+      </header>
 
-      {/* Player component panel */}
-      <div
+      {/* ---------------- MAIN CONTENT (scrolls) ---------------- */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
         style={{
-          marginBottom: "25px",
-          width: "100%",
+          flex: 1,
+          overflowY: "auto",
+          padding: "20px",
           display: "flex",
-          justifyContent: "center"
+          flexDirection: "column",
+          alignItems: "center",
         }}
       >
         <Player onMatchDataCallback={onMatchDataCallback} />
-      </div>
 
-      {/* Board display container */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: session ? 1 : 0.2, y: session ? 0 : 20 }}
-        transition={{ duration: 0.4 }}
-        style={{
-          padding: "20px",
-          background: "rgba(255,255,255,0.03)",
-          borderRadius: "20px",
-          boxShadow: "0 6px 20px rgba(0,0,0,0.4)",
-          minWidth: "300px",
-        }}
-      >
-        <Board
-          board={board}
-          turn={turn}
-          winner={winner}
-          players={players}
-          myUserId={session?.user_id ?? null}
-          onCellClick={handleCellClick}
-        />
+        <div
+          style={{
+            padding: "20px",
+            background: "rgba(255,255,255,0.03)",
+            borderRadius: "20px",
+            boxShadow: "0 6px 20px rgba(0,0,0,0.4)",
+            minWidth: "300px",
+          }}
+        >
+          <Board
+            board={board}
+            turn={turn}
+            winner={winner}
+            players={players}
+            myUserId={session?.user_id ?? null}
+            onCellClick={handleCellClick}
+          />
+        </div>
       </motion.div>
-    </motion.div>
+    </div>
   );
 }
diff --git a/src/tictactoe/styles.css b/src/tictactoe/styles.css
index 5a0fd1c..86e1555 100644
--- a/src/tictactoe/styles.css
+++ b/src/tictactoe/styles.css
@@ -3,7 +3,6 @@ body {
   background: #eaeef3;
   display: flex;
   justify-content: center;
-  padding-top: 50px;
   margin: 0;
   color: #222;
 }