Scrollable Areas

[rogadev]

Describe the bug

The way the current scrollable area is structured within the HTML is such that using a tool like the Chrome extension GoFullPage doesn't allow it to capture the full scrollable area. This is because of the way the child element handles height and overflow.

I would recommend making it such that the full report takes up as much vertical space as it needs, instead of being an internally scrollable area with overflow handling and a fixed height. I've included a screenshot of what you get, vs what you might expect to see when screenshotting another webpage with the same tool.

I'm sure you're working on a version that has a quick export report function. Until then, this would otherwise be a very easy way to export a PNG or PDF version of the report. I hope this helps!

Reproduction

No response

System / Nuxt Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
    Memory: 5.61 GB / 15.83 GB
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.6.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1555.0), Chromium (113.0.1774.35), ChromiumDev (115.0.1843.0)
    Internet Explorer: 11.0.22621.1

[NathanBeddoeWebDev]

I agree with this, I think having the main part of the page have an inner overflow is kinda janky, and most users (especially if the dashboard is shared with less technical users in a company) would be frustrated about it.

@harlan-zw I've got a branch on my fork that changes the layout to using the base page overflow, and then stickies the nav, Table Header and sidebar tab navigation. I'll wait for your input as to why it was done like this originally and then I can raise the PR if you're happy to go in this direction.

Messing with positioning attributes can be a little annoying, that would be my only concern.

[harlan-zw]

I honestly can't remember why it was set up like this @NathanBeddoeWebDev, happy to take a look at the PR :)