fix(dashboard): Fix scrolling on "View as table" modal

[codyml]

SUMMARY

In the "View as table" modal, accessed by clicking the three dots on a dashboard chart, results scroll behind/with the header and pagination. This PR fixes layout so header and pagination stay in place, for both the single-query and multi-query version of the modal.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before, single query:

Screen.Recording.2022-08-31.at.3.54.20.PM.mov

Before, multiple query:

Screen.Recording.2022-08-31.at.3.54.50.PM.mov

After, single query:

Screen.Recording.2022-08-31.at.3.55.21.PM.mov

After, multiple query:

Screen.Recording.2022-08-31.at.3.55.37.PM.mov

TESTING INSTRUCTIONS

• Open the "View as table" modal for single- and multiple-query charts and ensure scrolling works as expected.

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codyml]

@kasiazjc

[codecov]

Codecov Report

Merging #21282 (3b8899a) into master (34a79ad) will increase coverage by 0.00%.
The diff coverage is 100.00%.

❗ Current head 3b8899a differs from pull request most recent head 54a059d. Consider uploading reports for the commit 54a059d to get more accurate results

@@           Coverage Diff           @@
##           master   #21282   +/-   ##
=======================================
  Coverage   66.47%   66.47%           
=======================================
  Files        1789     1789           
  Lines       68376    68377    +1     
  Branches     7275     7275           
=======================================
+ Hits        45450    45451    +1     
  Misses      21051    21051           
  Partials     1875     1875           

Flag	Coverage Δ
javascript	52.50% <100.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...taTablesPane/components/ResultsPaneOnDashboard.tsx	100.00% <100.00%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[geido]

@codyml in the video "After, single query" I can see that the results are showing up behind the upper part of the header when scrolling. Is that something that we can get fixed on this PR?

[codyml]

@codyml in the video "After, single query" I can see that the results are showing up behind the upper part of the header when scrolling. Is that something that we can get fixed on this PR?

Oops yes!

[codyml]

@codyml in the video "After, single query" I can see that the results are showing up behind the upper part of the header when scrolling. Is that something that we can get fixed on this PR?

@geido Hmm, so I looked at this in my local dev env and I think it might just be a scaling effect caused by me having my Chrome viewport set to 75% when I recorded those videos. When I set it to 100% it doesn't happen. Would you mind spinning up an ephemeral env and letting me know if you see it happening there at normal resolution?

[zhaoyongjie]

/testenv up

[github-actions]

@zhaoyongjie Ephemeral environment spinning up at http://34.217.133.154:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.