From 1e17bda4ef10d66f4aae0a4d7b06e989bddd0fdb Mon Sep 17 00:00:00 2001
From: razorblade23 <josip.vivo.cubric@gmail.com>
Date: Tue, 15 Sep 2026 17:37:45 +0200
Subject: [PATCH 1/2] Fixes to styling of the button

---
 src/components/InteractivePython/index.js     |  6 +++-
 .../InteractivePython/styles.module.css       |  7 ++++
 src/components/MemoryGraphButton/index.js     | 29 ++++++++++++++++
 .../MemoryGraphButton/styles.module.css       | 20 +++++++++++
 src/components/MemoryGraphHeader/index.js     | 34 +++++--------------
 .../MemoryGraphHeader/styles.module.css       | 21 ------------
 src/theme/MDXComponents.js                    | 12 +------
 7 files changed, 70 insertions(+), 59 deletions(-)
 create mode 100644 src/components/MemoryGraphButton/index.js
 create mode 100644 src/components/MemoryGraphButton/styles.module.css

diff --git a/src/components/InteractivePython/index.js b/src/components/InteractivePython/index.js
index 1d0cc90..62a6bb6 100644
--- a/src/components/InteractivePython/index.js
+++ b/src/components/InteractivePython/index.js
@@ -6,8 +6,9 @@ import styles from './styles.module.css';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 // Import Docusaurus's color mode hook
 import { useColorMode } from '@docusaurus/theme-common';
+import MemoryGraphButton from '@site/src/components/MemoryGraphButton';
 
-export default function InteractivePython({ children }) {
+export default function InteractivePython({ children, showMemoryGraph = false }) {
   const { siteConfig } = useDocusaurusContext();
   const baseUrl = siteConfig.baseUrl;
   
@@ -124,6 +125,9 @@ export default function InteractivePython({ children }) {
     <div className={styles.wrapper}>
       <div className={styles.codeHeader}>
         <span className={styles.codeHeaderText}>Python Sandbox</span>
+        {showMemoryGraph && (
+          <MemoryGraphButton code={rawCode} className={styles.memoryGraphButton} />
+        )}
       </div>
 
       <CodeMirror
diff --git a/src/components/InteractivePython/styles.module.css b/src/components/InteractivePython/styles.module.css
index ff84348..3234606 100644
--- a/src/components/InteractivePython/styles.module.css
+++ b/src/components/InteractivePython/styles.module.css
@@ -20,6 +20,7 @@
   padding: 12px 16px;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
   border-bottom: 1px solid var(--ifm-toc-border-color);
 }
@@ -54,6 +55,12 @@
   color: var(--ifm-color-success, #4caf50);
 }
 
+/* Pushes the Memory Graph button to the header's right edge regardless
+   of viewport width, leaving "Python Sandbox" on the left */
+.memoryGraphButton {
+  margin-left: auto;
+}
+
 /* ==========================================================================
    3. RUN BUTTON
    ========================================================================== */
diff --git a/src/components/MemoryGraphButton/index.js b/src/components/MemoryGraphButton/index.js
new file mode 100644
index 0000000..b1adfca
--- /dev/null
+++ b/src/components/MemoryGraphButton/index.js
@@ -0,0 +1,29 @@
+import React, { useMemo } from 'react';
+import styles from './styles.module.css';
+
+const MEMORY_GRAPH_BASE_URL = 'https://memory-graph.com/';
+
+/**
+ * Just the "View on Memory Graph" link — no header bar, no label text.
+ * Rendered directly inside InteractivePython's own header row when a
+ * block is both `interactive` and `debug` (right-aligned next to
+ * "Python Sandbox"), and reused by MemoryGraphHeader — which adds the
+ * "Debug Mode" label + purple bar — for the debug-only case.
+ */
+export default function MemoryGraphButton({ code, className = '' }) {
+  const memoryGraphUrl = useMemo(
+    () => `${MEMORY_GRAPH_BASE_URL}#code=${encodeURIComponent((code || '').trim())}`,
+    [code]
+  );
+
+  return (
+    <a
+      href={memoryGraphUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`${styles.openButton} ${className}`}
+    >
+      View on Memory Graph ↗
+    </a>
+  );
+}
diff --git a/src/components/MemoryGraphButton/styles.module.css b/src/components/MemoryGraphButton/styles.module.css
new file mode 100644
index 0000000..2bb71f8
--- /dev/null
+++ b/src/components/MemoryGraphButton/styles.module.css
@@ -0,0 +1,20 @@
+.openButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 6px;
+  background-color: #7c3aed;
+  color: #ffffff !important; /* override Docusaurus's default link color */
+  font-family: var(--ifm-font-family-base, sans-serif);
+  font-weight: 600;
+  font-size: 0.85rem;
+  text-decoration: none !important;
+  white-space: nowrap;
+  transition: background-color 0.15s ease;
+}
+
+.openButton:hover {
+  background-color: #6d28d9;
+  color: #ffffff !important;
+}
diff --git a/src/components/MemoryGraphHeader/index.js b/src/components/MemoryGraphHeader/index.js
index c89e92f..d9c28ea 100644
--- a/src/components/MemoryGraphHeader/index.js
+++ b/src/components/MemoryGraphHeader/index.js
@@ -1,37 +1,19 @@
-import React, { useMemo } from 'react';
+import React from 'react';
+import MemoryGraphButton from '@site/src/components/MemoryGraphButton';
 import styles from './styles.module.css';
 
-const MEMORY_GRAPH_BASE_URL = 'https://memory-graph.com/';
-
 /**
- * Purple header bar linking a code snippet out to Bas Terwijn's Memory
- * Graph web debugger (memory-graph.com). This is just the bar + link —
- * it doesn't render the code itself, so it can sit above either a plain
- * <pre> (```lang debug, via MemoryGraphBlock) or InteractivePython's
- * editable sandbox (```lang interactive debug, via MDXComponents).
- *
- * `code` is the raw (untrimmed is fine) source string; `flush` squares
- * off the bottom edge and drops the outer margin so it butts directly
- * against whatever renders right beneath it, instead of floating as its
- * own rounded pill.
+ * Purple header bar used for debug-only blocks (```lang debug): a
+ * "Debug Mode" label plus the Memory Graph button, sitting flush above
+ * the theme's plain <pre> via MemoryGraphBlock. When a block is also
+ * `interactive`, this isn't used at all — the button renders inline in
+ * InteractivePython's own header instead (see MDXComponents.js).
  */
 export default function MemoryGraphHeader({ code, flush = false }) {
-  const memoryGraphUrl = useMemo(
-    () => `${MEMORY_GRAPH_BASE_URL}#code=${encodeURIComponent((code || '').trim())}`,
-    [code]
-  );
-
   return (
     <div className={`${styles.header} ${flush ? styles.flush : ''}`}>
       <span className={styles.headerText}>Debug Mode</span>
-      <a
-        href={memoryGraphUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={styles.openButton}
-      >
-        View on Memory Graph ↗
-      </a>
+      <MemoryGraphButton code={code} />
     </div>
   );
 }
diff --git a/src/components/MemoryGraphHeader/styles.module.css b/src/components/MemoryGraphHeader/styles.module.css
index d99077b..a6050cb 100644
--- a/src/components/MemoryGraphHeader/styles.module.css
+++ b/src/components/MemoryGraphHeader/styles.module.css
@@ -43,27 +43,6 @@
   color: #e9d5ff;
 }
 
-.openButton {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  border-radius: 6px;
-  background-color: #7c3aed;
-  color: #ffffff !important; /* override Docusaurus's default link color */
-  font-family: var(--ifm-font-family-base, sans-serif);
-  font-weight: 600;
-  font-size: 0.85rem;
-  text-decoration: none !important;
-  white-space: nowrap;
-  transition: background-color 0.15s ease;
-}
-
-.openButton:hover {
-  background-color: #6d28d9;
-  color: #ffffff !important;
-}
-
 @media (max-width: 480px) {
   .header {
     justify-content: center;
diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
index ee3698f..d330527 100644
--- a/src/theme/MDXComponents.js
+++ b/src/theme/MDXComponents.js
@@ -1,7 +1,6 @@
 import MDXComponents from '@theme-original/MDXComponents';
 import InteractivePython from '@site/src/components/InteractivePython';
 import MemoryGraphBlock from '@site/src/components/MemoryGraphBlock';
-import MemoryGraphHeader from '@site/src/components/MemoryGraphHeader';
 
 export default {
   ...MDXComponents,
@@ -11,17 +10,8 @@ export default {
     const isInteractive = metastring.includes('interactive');
     const isDebug = metastring.includes('debug');
 
-    if (isInteractive && isDebug) {
-      const rawCode = props.children?.props?.children || '';
-      return (
-        <>
-          <MemoryGraphHeader code={rawCode} />
-          <InteractivePython {...props} />
-        </>
-      );
-    }
     if (isInteractive) {
-      return <InteractivePython {...props} />;
+      return <InteractivePython {...props} showMemoryGraph={isDebug} />;
     }
     if (isDebug) {
       return <MemoryGraphBlock {...props} />;

From f7dd35de4a58920e4f611095d6bc24d76a8d9d4f Mon Sep 17 00:00:00 2001
From: razorblade23 <josip.vivo.cubric@gmail.com>
Date: Tue, 15 Sep 2026 18:45:30 +0200
Subject: [PATCH 2/2] update styles.module.css

---
 src/components/MemoryGraphBlock/styles.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/MemoryGraphBlock/styles.module.css b/src/components/MemoryGraphBlock/styles.module.css
index 9963a66..3353a15 100644
--- a/src/components/MemoryGraphBlock/styles.module.css
+++ b/src/components/MemoryGraphBlock/styles.module.css
@@ -9,3 +9,4 @@
   border-top-right-radius: 0 !important;
   border-top: none !important;
 }
+