[Help wanted/Question] captures wrong section of offcanvas panel — PNG does not match expected div in selector

[n-o-tud]

Hey,

Context / Use Case:

I'm currently maintaining the documentation for our Web Mapping Application and want to keep the screenshots as up to date as possible. Therefore I really like the idea behind the shot-scraper tool, and I’m exploring how to use it to automatically generate screenshots of specific UI components — specifically, individual <div> elements within the app.

One key example: the app includes a bottom navigation bar. When clicking the Settings button, an offcanvas panel appears from the right, which contains styling and layer configuration options. I want to generate separate screenshots for each functional area inside that panel for documentation purposes.

The Problem:

I'm trying to capture a screenshot of the specific <div> with the ID heaFlowModels-accordion-item, which appears inside the offcanvas. However, the screenshot that gets generated only shows the top of the offcanvas panel — not the heaFlowModels-accordion-item section.

Below is a link to the live application:
https://ihfc-iugg.github.io/HeatFlowMapping/

Workflow:
Run the shots.yml in shell

shot-scraper multi shots.yml

shots.yml

# Settings - Heat Flow Models
- output: docs/_static/_mapping/shot-scraper/settings-heat-flow-models.PNG
  url: https://ihfc-iugg.github.io/HeatFlowMapping/
  javascript: |
    const settingsBtn = document.querySelector('#SettingsnavBarBtn');
    if (settingsBtn) {
      // Create and dispatch a click event
      const clickSettingsNavBarBtnEvent = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
      });
      // click settings btn to open the settings panel
      settingsBtn.dispatchEvent(clickSettingsNavBarBtnEvent);
    }
  wait-for: document.querySelector('#heaFlowModels-accordion-item')
  selector: "#heaFlowModels-accordion-item"

Output:
What I expected:

A screenshot only of the #heaFlowModels-accordion-item div.

What I got:
The actual ouput PNG settings-heat-flow-models.PNG:

Goal:
To write a shots.yaml script that captures only the #heaFlowModels-accordion-item div, ensuring that it is both visible and fully rendered in the final PNG output.

Any help or ideas would be greatly appreciated!
Thanks in advance for any guidance!