From f8a51c9f217a059c6fae07437f6aec5abdc1f8bd Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 19 Jul 2025 14:04:34 +0000
Subject: [PATCH] Remove header/footer from interactive.

Omit the global header and footer when accessing the interactive from the gallery.
---
 .../theme-pages/discrete-math/Foundations.tsx | 44 +++++++++----------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/pages/theme-pages/discrete-math/Foundations.tsx b/src/pages/theme-pages/discrete-math/Foundations.tsx
index 67a1beb..b3230b4 100644
--- a/src/pages/theme-pages/discrete-math/Foundations.tsx
+++ b/src/pages/theme-pages/discrete-math/Foundations.tsx
@@ -41,36 +41,32 @@ const Foundations = () => {
   if (selectedInteractive) {
     const InteractiveComponent = selectedInteractive.component;
     return (
-      <Layout>
-        <div className="container mx-auto px-4 py-8">
-          <div className="space-y-6">
-            <div className="flex items-center justify-between">
-              <button
-                onClick={() => setSelectedInteractive(null)}
-                className="text-primary hover:text-primary/80 font-medium"
-              >
-                ← Back to Foundations
-              </button>
-              <h1 className="text-2xl font-bold text-foreground">{selectedInteractive.title}</h1>
-              <Link 
-                to="/themes/discrete-math"
-                className="text-primary hover:text-primary/80 font-medium"
-              >
-                Back to Discrete Math →
-              </Link>
-            </div>
-            <div className="bg-background border rounded-lg p-6">
-              <BinaryNumberGame />
-            </div>
+      <div className="min-h-screen bg-background p-6">
+        <div className="max-w-4xl mx-auto space-y-6">
+          <div className="flex items-center justify-between">
             <button
               onClick={() => setSelectedInteractive(null)}
-              className="inline-flex items-center px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/80 transition-colors"
+              className="text-primary hover:text-primary/80 font-medium"
             >
-              ← Back to Foundations Gallery
+              ← Back to Foundations
             </button>
+            <h1 className="text-2xl font-bold text-foreground">{selectedInteractive.title}</h1>
+            <Link 
+              to="/themes/discrete-math"
+              className="text-primary hover:text-primary/80 font-medium"
+            >
+              Back to Discrete Math →
+            </Link>
           </div>
+          <BinaryNumberGame />
+          <button
+            onClick={() => setSelectedInteractive(null)}
+            className="inline-flex items-center px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/80 transition-colors"
+          >
+            ← Back to Foundations Gallery
+          </button>
         </div>
-      </Layout>
+      </div>
     );
   }