diff --git a/.claude/metrics/hooks-metrics.json b/.claude/metrics/hooks-metrics.json
index cdaa5aa2..8a16164f 100644
--- a/.claude/metrics/hooks-metrics.json
+++ b/.claude/metrics/hooks-metrics.json
@@ -4339,6 +4339,48 @@
       "file": "/home/theflow/projects/tractatus/public/architecture.html",
       "result": "passed",
       "reason": null
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T03:44:29.571Z",
+      "file": "/home/theflow/projects/tractatus/public/js/components/interactive-diagram.js",
+      "result": "passed",
+      "reason": null
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T03:44:44.194Z",
+      "file": "/home/theflow/projects/tractatus/public/architecture.html",
+      "result": "blocked",
+      "reason": "CSP violations in content after edit"
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T03:44:44.369Z",
+      "file": "/home/theflow/projects/tractatus/public/js/components/interactive-diagram.js",
+      "result": "passed",
+      "reason": null
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T03:47:31.242Z",
+      "file": "/home/theflow/projects/tractatus/public/architecture.html",
+      "result": "blocked",
+      "reason": "CSP violations in content after edit"
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T05:18:47.371Z",
+      "file": "/home/theflow/projects/tractatus/public/architecture.html",
+      "result": "passed",
+      "reason": null
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T05:19:01.520Z",
+      "file": "/home/theflow/projects/tractatus/public/architecture.html",
+      "result": "passed",
+      "reason": null
     }
   ],
   "blocks": [
@@ -4563,12 +4605,24 @@
       "timestamp": "2025-10-19T02:32:41.175Z",
       "file": "/home/theflow/projects/tractatus/public/js/components/interactive-diagram.js",
       "reason": "CSP violations in new content"
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T03:44:44.194Z",
+      "file": "/home/theflow/projects/tractatus/public/architecture.html",
+      "reason": "CSP violations in content after edit"
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T03:47:31.242Z",
+      "file": "/home/theflow/projects/tractatus/public/architecture.html",
+      "reason": "CSP violations in content after edit"
     }
   ],
   "session_stats": {
-    "total_edit_hooks": 435,
-    "total_edit_blocks": 32,
-    "last_updated": "2025-10-19T03:40:15.188Z",
+    "total_edit_hooks": 441,
+    "total_edit_blocks": 34,
+    "last_updated": "2025-10-19T05:19:01.520Z",
     "total_write_hooks": 185,
     "total_write_blocks": 5
   }
diff --git a/public/architecture.html b/public/architecture.html
index ace12a21..4ab1525b 100644
--- a/public/architecture.html
+++ b/public/architecture.html
@@ -330,19 +330,19 @@
         </div>
       </div>
 
-      <div id="diagram-container" class="relative bg-white rounded-xl shadow-lg p-6 lg:p-8 border border-gray-200">
+      <div id="diagram-container" class="relative bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8 border border-gray-200">
         <!-- Flex container for side-by-side layout on desktop -->
-        <div class="flex flex-col lg:flex-row lg:items-start lg:gap-8">
+        <div class="flex flex-col lg:flex-row lg:items-start lg:gap-6">
           <!-- Interactive SVG -->
-          <div class="flex-shrink-0 flex justify-center lg:justify-start mb-6 lg:mb-0">
+          <div class="flex-shrink-0 flex justify-center lg:justify-start w-full lg:w-auto mb-6 lg:mb-0">
             <object
               data="/images/architecture-diagram-interactive.svg"
               type="image/svg+xml"
               id="interactive-svg-object"
-              class="w-full max-w-md lg:max-w-lg"
+              class="w-full max-w-sm sm:max-w-md lg:max-w-lg h-auto max-h-[500px]"
               aria-label="Interactive Tractatus Architecture Diagram">
               <!-- Fallback for browsers that don't support object tag -->
-              <img src="/images/architecture-diagram-interactive.svg" alt="Tractatus Architecture Diagram" class="w-full max-w-md lg:max-w-lg" />
+              <img src="/images/architecture-diagram-interactive.svg" alt="Tractatus Architecture Diagram" class="w-full max-w-sm sm:max-w-md lg:max-w-lg" />
             </object>
           </div>
 
@@ -512,7 +512,7 @@
   <script src="/js/scroll-animations.js"></script>
 
   <!-- Interactive Architecture Diagram (Phase 3) -->
-  <script src="/js/components/interactive-diagram.js?v=20251019162000"></script>
+  <script src="/js/components/interactive-diagram.js?v=20251019163000"></script>
 
   <!-- Footer Component -->
   <script src="/js/components/footer.js"></script>
diff --git a/public/js/components/interactive-diagram.js b/public/js/components/interactive-diagram.js
index 79b1284f..5ecbc2af 100644
--- a/public/js/components/interactive-diagram.js
+++ b/public/js/components/interactive-diagram.js
@@ -149,7 +149,7 @@ class InteractiveDiagram {
         console.log('[InteractiveDiagram] Using documentElement as SVG');
       }
 
-      if (!svg || svg.tagName !== 'svg') {
+      if (!svg || (svg.tagName && svg.tagName.toLowerCase() !== 'svg')) {
         console.warn('[InteractiveDiagram] SVG diagram not found in contentDocument');
         return;
       }
@@ -255,7 +255,7 @@ class InteractiveDiagram {
     if (!panel) {
       panel = document.createElement('div');
       panel.id = 'service-detail-panel';
-      panel.className = 'flex-1 bg-white rounded-xl shadow-2xl p-6 border-2 lg:min-w-[400px]';
+      panel.className = 'w-full lg:flex-1 bg-white rounded-xl shadow-2xl p-4 sm:p-6 border-2 lg:min-w-[400px]';
       panel.style.borderColor = service.color;
 
       // Insert into the flex container for side-by-side layout