hermes-config/skills/software-development/web-ui-repair/references/browser-inner-scroll-debugging.md

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:

(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:

(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.