- 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

@@ -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,56 +54,48 @@ 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 }}
+        <div
           style={{
             padding: "20px",
             background: "rgba(255,255,255,0.03)",
@@ -132,7 +112,8 @@ export default function TicTacToe() {
             myUserId={session?.user_id ?? null}
             onCellClick={handleCellClick}
           />
+        </div>
       </motion.div>
-    </motion.div>
+    </div>
   );
 }

src/tictactoe/styles.css

@@ -3,7 +3,6 @@ body {
   background: #eaeef3;
   display: flex;
   justify-content: center;
-  padding-top: 50px;
   margin: 0;
   color: #222;
 }