initial commit

2026-07-12 10:17:17 -04:00
commit dab5a4ebc6
1424 changed files with 330463 additions and 0 deletions
@@ -0,0 +1,57 @@
+# Browser Inner-Scroll Debugging
+
+## The Problem
+
+The `browser_scroll` tool scrolls the document viewport. But many React SPAs (like SPQ-v2) have a fixed layout where the scrollable content lives inside an inner element (e.g., `<main>` with `overflow-y-auto`). When `browser_scroll` fires, the document moves but the inner content stays put — buttons below the fold remain invisible and unclickable.
+
+## Diagnosis
+
+Use `browser_console` expression to check if a target button is below the viewport:
+
+```javascript
+(function(){
+  var allBtns = document.querySelectorAll('button');
+  for(var i=0; i<allBtns.length; i++) {
+    var b = allBtns[i];
+    if(b.textContent.includes('Save')) {
+      return 'disabled=' + b.disabled +
+        ' top=' + b.getBoundingClientRect().top +
+        ' bottom=' + b.getBoundingClientRect().bottom +
+        ' windowH=' + window.innerHeight;
+    }
+  }
+  return 'not found';
+})()
+```
+
+If `bottom > windowH`, the button is off-screen and can't be clicked by the browser tool.
+
+## Fix
+
+Scroll the inner scrollable container to reveal the button:
+
+```javascript
+(function(){
+  var main = document.querySelector('main');
+  if(main) {
+    main.scrollTop = main.scrollHeight;
+    return 'scrolled main to ' + main.scrollTop;
+  }
+  // Try other scrollable containers
+  var candidates = document.querySelectorAll('[class*="overflow"]');
+  for(var c of candidates) {
+    if(c.scrollHeight > c.clientHeight) {
+      c.scrollTop = c.scrollHeight;
+      return 'scrolled ' + c.tagName + '.' + c.className.split(' ')[0] + ' to ' + c.scrollTop;
+    }
+  }
+  return 'no scrollable container found';
+})()
+```
+
+After scrolling, verify the button is now visible by re-running the diagnosis expression. A button is clickable when its `top` is between 0 and `windowH`.
+
+## Pitfall
+
+- The `browser_console` tool blocks access to `localStorage` but allows DOM queries like `querySelector` and `getBoundingClientRect` — use these for UI debugging.
+- Some SPAs have MULTIPLE scrollable containers (sidebar, main content, modal overlays). Find the right one by checking `scrollHeight > clientHeight`.