From 7866a8577a16f0e522a1d937b2789d68ac554446 Mon Sep 17 00:00:00 2001
From: Jordan Ramos <jordan.ramos@spectrum.com>
Date: Wed, 24 Jun 2026 17:52:37 -0600
Subject: [PATCH] =?UTF-8?q?Fix=20User=20Guide=20TOC=20=E2=80=94=20add=20he?=
 =?UTF-8?q?ading=20IDs=20and=20smooth=20scroll=20anchor=20links?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Headings now render with id attributes derived from their text so
TOC anchor links (#getting-started, etc.) have targets. Internal
anchor clicks use scrollIntoView with smooth behavior instead of
full page navigation.
---
 frontend/src/components/UserGuideModal.js | 35 +++++++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/UserGuideModal.js b/frontend/src/components/UserGuideModal.js
index 123b93d..cdac66c 100644
--- a/frontend/src/components/UserGuideModal.js
+++ b/frontend/src/components/UserGuideModal.js
@@ -145,9 +145,38 @@ export default function UserGuideModal({ isOpen, onClose }) {
           ) : (
             <ReactMarkdown
               components={{
-                h1: ({ children }) => <h1 style={{ fontSize: '1.5rem', fontWeight: 700, color: '#F8FAFC', marginBottom: '1rem', borderBottom: '1px solid rgba(14,165,233,0.2)', paddingBottom: '0.5rem' }}>{children}</h1>,
-                h2: ({ children }) => <h2 style={{ fontSize: '1.2rem', fontWeight: 600, color: '#0EA5E9', marginTop: '2rem', marginBottom: '0.75rem' }}>{children}</h2>,
-                h3: ({ children }) => <h3 style={{ fontSize: '1rem', fontWeight: 600, color: '#7DD3FC', marginTop: '1.5rem', marginBottom: '0.5rem' }}>{children}</h3>,
+                h1: ({ children }) => {
+                  const id = String(children).toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
+                  return <h1 id={id} style={{ fontSize: '1.5rem', fontWeight: 700, color: '#F8FAFC', marginBottom: '1rem', borderBottom: '1px solid rgba(14,165,233,0.2)', paddingBottom: '0.5rem' }}>{children}</h1>;
+                },
+                h2: ({ children }) => {
+                  const id = String(children).toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
+                  return <h2 id={id} style={{ fontSize: '1.2rem', fontWeight: 600, color: '#0EA5E9', marginTop: '2rem', marginBottom: '0.75rem' }}>{children}</h2>;
+                },
+                h3: ({ children }) => {
+                  const id = String(children).toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
+                  return <h3 id={id} style={{ fontSize: '1rem', fontWeight: 600, color: '#7DD3FC', marginTop: '1.5rem', marginBottom: '0.5rem' }}>{children}</h3>;
+                },
+                a: ({ href, children }) => {
+                  // Handle internal anchor links — scroll within the modal
+                  if (href && href.startsWith('#')) {
+                    return (
+                      <a
+                        href={href}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          const targetId = href.slice(1);
+                          const el = document.getElementById(targetId);
+                          if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        }}
+                        style={{ color: '#7DD3FC', textDecoration: 'none', borderBottom: '1px solid rgba(125,211,252,0.3)' }}
+                      >
+                        {children}
+                      </a>
+                    );
+                  }
+                  return <a href={href} target="_blank" rel="noopener noreferrer" style={{ color: '#7DD3FC', textDecoration: 'none' }}>{children}</a>;
+                },
                 p: ({ children }) => <p style={{ color: '#CBD5E1', lineHeight: 1.7, marginBottom: '0.75rem', fontSize: '0.875rem' }}>{children}</p>,
                 li: ({ children }) => <li style={{ color: '#CBD5E1', marginBottom: '0.35rem', fontSize: '0.875rem', lineHeight: 1.6 }}>{children}</li>,
                 ul: ({ children }) => <ul style={{ paddingLeft: '1.25rem', marginBottom: '0.75rem' }}>{children}</ul>,