From 8d84ac0476f906727777f948a62803f9336f9879 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 20 Jul 2025 02:37:37 +0000
Subject: [PATCH] Fix interactive page layout

Remove global header/footer and add share section to the interactive page.
---
 src/components/GameOfSim.tsx    | 10 ++++++++++
 src/components/GamesGallery.tsx | 20 ++++++++++----------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/GameOfSim.tsx b/src/components/GameOfSim.tsx
index f404cf1..52ca88c 100644
--- a/src/components/GameOfSim.tsx
+++ b/src/components/GameOfSim.tsx
@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { RotateCcw, Undo2 } from 'lucide-react';
+import SocialShare from '@/components/SocialShare';
 
 interface Edge {
   from: number;
@@ -265,6 +266,15 @@ const GameOfSim = () => {
               Avoid creating a triangle of your own color!
             </p>
           </div>
+
+          {/* Social Share */}
+          <div className="flex justify-center">
+            <SocialShare 
+              title="Game of Sim"
+              description="Play the strategic Game of Sim! Take turns coloring edges between vertices while avoiding creating triangles of your own color."
+              url={`${window.location.origin}/themes/games`}
+            />
+          </div>
         </CardContent>
       </Card>
     </div>
diff --git a/src/components/GamesGallery.tsx b/src/components/GamesGallery.tsx
index 8604242..669d57b 100644
--- a/src/components/GamesGallery.tsx
+++ b/src/components/GamesGallery.tsx
@@ -36,16 +36,16 @@ const GamesGallery = () => {
   if (selectedGame) {
     const GameComponent = selectedGame.component;
     return (
-      <div className="space-y-6">
-        <div className="flex items-center gap-4">
-          <button 
-            onClick={() => setSelectedGame(null)}
-            className="text-primary hover:text-primary/80 font-medium"
-          >
-            ← Back to Educational Games
-          </button>
-        </div>
-        <div className="bg-background border rounded-lg p-6">
+      <div className="min-h-screen bg-background">
+        <div className="container mx-auto px-4 py-8 space-y-6">
+          <div className="flex items-center gap-4">
+            <button 
+              onClick={() => setSelectedGame(null)}
+              className="text-primary hover:text-primary/80 font-medium"
+            >
+              ← Back to Educational Games
+            </button>
+          </div>
           <GameComponent />
         </div>
       </div>