fixed a bit of css

app/(main)/create-team/page.js

@@ -1,5 +1,5 @@
 'use client'; // Mark as a Client Component
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
@@ -11,17 +11,18 @@ export default function CreateTeam() {
     const [isLoading, setIsLoading] = useState(false);
     const router = useRouter();
 
+    // Use useEffect for navigation instead of doing it in render
+    useEffect(() => {
         // Redirect if not authenticated
         if (status === 'unauthenticated') {
             router.push('/login');
-        return null;
         }
 
         // Redirect if user is admin
         if (status === 'authenticated' && session?.user?.role === 'admin') {
             router.push('/admin');
-        return null;
         }
+    }, [status, session, router]);
 
     const handleCreateTeam = async (e) => {
         e.preventDefault();
@@ -59,10 +60,14 @@ export default function CreateTeam() {
         return <div className="loading">Loading...</div>;
     }
 
+    // Don't render anything if redirecting
+    if (status === 'unauthenticated' || (status === 'authenticated' && session?.user?.role === 'admin')) {
+        return null;
+    }
+
     return (
         <div className="team-selection-container">
             <div className="page-header">
-                <Link href="/team-selection" className="back-button">←</Link>
                 <div className="page-title">Create Team</div>
                 <div className="placeholder"></div>
             </div>

app/(main)/team-selection/page.js

@@ -58,7 +58,7 @@ export default function TeamSelection() {
     return (
         <div className="team-selection-container">
             <div className="page-header">
-                <div className="back-button">←</div>
+                <div className="back-button"></div>
                 <div className="page-title">Team Selection</div>
                 <div className="placeholder"></div>
             </div>

app/api/teams/create/route.js

@@ -4,19 +4,24 @@ import { authOptions } from '../../auth/[...nextauth]/route';
 import { nanoid } from 'nanoid';
 
 export async function POST(request) {
+    try {
         const session = await getServerSession(authOptions);
 
         if (!session) {
-        return Response.json({ success: false, error: 'Unauthorized' }, { status: 401 });
+            return Response.json({ success: false, error: 'Unauthorised-tc' }, { status: 401 });
         }
 
-    try {
         const { name, userId } = await request.json();
 
         if (!name || name.trim() === '') {
             return Response.json({ success: false, error: 'Team name is required' });
         }
 
+        // Verify the requesting user matches the userId
+        if (session.user.id !== userId) {
+            return Response.json({ success: false, error: 'User ID mismatch' }, { status: 403 });
+        }
+
         // Generate a unique team code (6 characters)
         const teamCode = nanoid(6).toUpperCase();
 

app/globals.css

@@ -519,7 +519,7 @@ p {
     padding: 0.75rem 0;
     position: sticky;
     bottom: 0;
-    width: 100%;
+    width: 110%;
 }
 
 .nav-item {
@@ -559,17 +559,6 @@ p {
     margin-bottom: 1rem;
 }
 
-.team-button {
-    background-color: #63503d;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    padding: 0.75rem;
-    font-size: 1rem;
-    cursor: pointer;
-    width: 100%;
-}
-
 /* Clue Page */
 .clue-page {
     background-color: #f3cf55;
@@ -765,3 +754,28 @@ p {
     flex-direction: column;
     min-height: 100vh;
 }
+
+.team-button {
+    background-color: #63503d;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 0.75rem;
+    font-size: 1rem;
+    cursor: pointer;
+    width: 100%;
+}
+
+.create-team-link {
+    background-color: #63503d;
+    color: white;
+    border: none;
+    display: inline-block;
+    padding: 10px 15px;
+    border-radius: 4px;
+    margin-top: 0.50rem;
+    margin-bottom: 0.50rem;
+    text-decoration: none;
+    text-align: center;
+    width: 100%;
+}