fix: removing dashboard scrollbars

[rusackas]

SUMMARY

In order to fix the random scrollbars on dashboard charts, I added a flex layout to the .chart-slice div. This seems to remove some "phantom" spacing between the chart header and the chart body that was causing the overflow. From what I can tell this leaves scrollbars where we need them, e.g. the short filter box in the screenshot below.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

before.mp4

After:

after.mp4

TEST PLAN

Manual/visual tire kicking.

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[codecov-io]

Codecov Report

Merging #12479 (50046e7) into master (e47350e) will decrease coverage by 7.95%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #12479      +/-   ##
==========================================
- Coverage   66.82%   58.87%   -7.96%     
==========================================
  Files        1015      959      -56     
  Lines       49555    46791    -2764     
  Branches     5079     4341     -738     
==========================================
- Hits        33116    27548    -5568     
- Misses      16309    19243    +2934     
+ Partials      130        0     -130     

Flag	Coverage Δ
cypress	50.99% <ø> (-0.01%)	⬇️
javascript	?
python	63.31% <ø> (-0.78%)	⬇️

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

Impacted Files	Coverage Δ
...uperset-frontend/src/dashboard/util/dnd-reorder.js	0.00% <0.00%> (-100.00%)	⬇️
...rset-frontend/src/dashboard/util/getEmptyLayout.js	0.00% <0.00%> (-100.00%)	⬇️
...dashboard/components/resizable/ResizableHandle.jsx	0.00% <0.00%> (-100.00%)	⬇️
.../src/dashboard/util/getFilterScopeFromNodesTree.js	0.00% <0.00%> (-93.48%)	⬇️
...set-frontend/src/views/CRUD/alert/ExecutionLog.tsx	11.76% <0.00%> (-88.24%)	⬇️
...src/dashboard/components/gridComponents/Header.jsx	10.52% <0.00%> (-86.85%)	⬇️
superset-frontend/src/components/IconTooltip.tsx	13.33% <0.00%> (-86.67%)	⬇️
...rc/dashboard/components/gridComponents/Divider.jsx	13.33% <0.00%> (-86.67%)	⬇️
...end/src/SqlLab/components/ExploreResultsButton.jsx	8.00% <0.00%> (-84.00%)	⬇️
...nd/src/views/CRUD/data/query/QueryPreviewModal.tsx	14.70% <0.00%> (-82.97%)	⬇️
... and 405 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e47350e...50046e7. Read the comment docs.

[ktmud]

@rusackas I think my solution in #12478 is more robust. Wdyt?

[rusackas]

@rusackas I think my solution in #12478 is more robust. Wdyt?

Agreed. Less LESS always wins my vote. And putting scrollbars explicitly where needed seems ideal. Nice work :D

Closing in favor of #12478