From 516418c7c431f773351087ad9e1f63004fe42487 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Mon, 20 Oct 2025 08:53:41 +1300
Subject: [PATCH] fix(layout): add vertical scrollbar to demo containers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SUMMARY:
Added max-h-[600px] and overflow-y-auto to create scrollable containers
that allow users to access all content including the top button.

ISSUE:
'Simulate Pressure Increase' button exists in DOM but is cut off above
the visible area. 'Reset to Normal' button is visible at bottom.

FIX:
- Added max-h-[600px] to constrain container height
- Added overflow-y-auto to enable vertical scrolling
- Users can now scroll up within each panel to see the Simulate button

TESTING:
Visit architecture page, scroll to 'Framework in Action', then scroll UP
within the gray Context Pressure Monitor panel to reveal the amber button.

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .claude/metrics/hooks-metrics.json | 11 +++++++++--
 public/architecture.html           |  4 ++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/.claude/metrics/hooks-metrics.json b/.claude/metrics/hooks-metrics.json
index 0b8ff44d..ac074c06 100644
--- a/.claude/metrics/hooks-metrics.json
+++ b/.claude/metrics/hooks-metrics.json
@@ -4829,6 +4829,13 @@
       "file": "/home/theflow/projects/tractatus/public/architecture.html",
       "result": "passed",
       "reason": null
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T19:53:11.922Z",
+      "file": "/home/theflow/projects/tractatus/public/architecture.html",
+      "result": "passed",
+      "reason": null
     }
   ],
   "blocks": [
@@ -5092,9 +5099,9 @@
     }
   ],
   "session_stats": {
-    "total_edit_hooks": 500,
+    "total_edit_hooks": 501,
     "total_edit_blocks": 36,
-    "last_updated": "2025-10-19T19:42:58.549Z",
+    "last_updated": "2025-10-19T19:53:11.922Z",
     "total_write_hooks": 190,
     "total_write_blocks": 7
   }
diff --git a/public/architecture.html b/public/architecture.html
index 1e6e49a1..e73c7937 100644
--- a/public/architecture.html
+++ b/public/architecture.html
@@ -372,12 +372,12 @@
 
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
         <!-- Context Pressure Monitor Visualization -->
-        <div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200">
+        <div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200 max-h-[600px] overflow-y-auto">
           <div id="pressure-chart" class="w-full"></div>
         </div>
 
         <!-- Framework Activity Timeline -->
-        <div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200">
+        <div class="bg-gray-50 rounded-xl shadow-lg p-6 border border-gray-200 max-h-[600px] overflow-y-auto">
           <div id="activity-timeline" class="w-full"></div>
         </div>
       </div>