fix(chart): scrollbar keep flusing on and off

[justinpark]

SUMMARY

This bug introduced by #20282
After resize target element has scrollbars, the chart keeps flushing scrollbars on and oft.
It because keeps re-calculate the element's size due to the content size is different with/without scrollbars.

This commit replaces the resize observe element with the parent element (which has no scrollbars) and then calculate the chartPanel element from onResize handler.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

After:

after--chart-ref-observe.mov

Before:

before--chart-ref-observe.mov

TESTING INSTRUCTIONS

Open a chart explore
Resize window width smaller
check the chart scroll

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

[rusackas]

Awesome! This might actually close out a lot of GitHub Issues if we're lucky! THANK YOU!

[michael-s-molina]

I fixed the Frontend CI error here.

[codecov]

Codecov Report

Merging #23778 (01985d1) into master (60c2e70) will increase coverage by 0.11%.
The diff coverage is 69.23%.

❗ Current head 01985d1 differs from pull request most recent head d661445. Consider uploading reports for the commit d661445 to get more accurate results

@@            Coverage Diff             @@
##           master   #23778      +/-   ##
==========================================
+ Coverage   67.91%   68.02%   +0.11%     
==========================================
  Files        1936     1937       +1     
  Lines       74929    74937       +8     
  Branches     8141     8143       +2     
==========================================
+ Hits        50886    50974      +88     
+ Misses      21955    21874      -81     
- Partials     2088     2089       +1     

Flag	Coverage Δ
javascript	54.28% <66.66%> (-0.01%)	⬇️

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

Impacted Files	Coverage Δ
superset/row_level_security/schemas.py	100.00% <ø> (ø)
superset/row_level_security/commands/update.py	91.66% <50.00%> (ø)
...s/ExploreChartPanel/useResizeDetectorByObserver.ts	62.50% <62.50%> (ø)
...src/explore/components/ExploreChartPanel/index.jsx	69.73% <100.00%> (ø)
superset/row_level_security/commands/create.py	100.00% <100.00%> (ø)

... and 10 files with indirect coverage changes

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

[justinpark]

I fixed the Frontend CI error here.

@michael-s-molina the CI error came from here and I already fixed with replacing mock.

[michael-s-molina]

LGTM

[eschutho]

Hi @justinpark we're seeing some regression with this PR when running reports, or viewing a chart in standalone mode. Do you have time to put up a quick fix for this issue? Let me know if you need any help reproducing.