fix: filters push out apply button on dashboard

[kkucharc]

SUMMARY

Changed behaviour of too big filter block:

• Added class and calculated height (100%-padding) for blocks -> otherwise scroll was appearing in every chart
• Added auto overflow for blocks on dashboards so scroll will appear when there will be too many filters
• Added menuPortalTarget because dropdown menu was limited to the box of chart.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

TEST PLAN

ADDITIONAL INFORMATION

• Has associated issue: Apply button gets pushed out of filter box when the filter box is small with too many filter values selected  #11419
• 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 #11580 into master will decrease coverage by 4.55%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master   #11580      +/-   ##
==========================================
- Coverage   66.56%   62.01%   -4.56%     
==========================================
  Files         876      878       +2     
  Lines       42172    42265      +93     
  Branches     3949     3949              
==========================================
- Hits        28073    26209    -1864     
- Misses      13996    15874    +1878     
- Partials      103      182      +79     

Flag	Coverage Δ
cypress	?
javascript	62.45% <100.00%> (ø)
python	61.74% <ø> (-0.42%)	⬇️

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

Impacted Files	Coverage Δ
.../src/dashboard/components/gridComponents/Chart.jsx	66.32% <ø> (-16.33%)	⬇️
...t-frontend/src/components/Select/OnPasteSelect.jsx	95.23% <100.00%> (ø)
superset-frontend/src/SqlLab/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/explore/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/dashboard/App.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/explore/index.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/dashboard/index.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/setup/setupColors.js	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/chart/ChartContainer.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/setup/setupFormatters.js	0.00% <0.00%> (-100.00%)	⬇️
... and 186 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 6d5d92a...27f83b4. Read the comment docs.

[rusackas]

@graceguo-supercat @ktmud curious if you have any objection to this solution. This issue has come up several times in the past, and I heven't seen a solution yet that makes everyone happy. This seems like at least a step in the right direction. Thoughts?

[ktmud]

I think this makes sense. But is there a way to make only the chart content the scrollable area, i.e., make the chart title sticky?

[junlincc]

I think this makes sense. But is there a way to make only the chart content the scrollable area, i.e., make the chart title sticky?

agreed, make sense. let's make the filter box title sticky. @kkucharc 🙏

[rusackas]

@ktmud do you think there would be much value in making the Apply button sticky on the bottom, so the filters start to scroll behind it? Or is that just hogging the limited real estate?

[ktmud]

As much as I like it to be sticky too, I think your point about limited real estate is more important.

[kkucharc]

I appreciate your feedback and input 👍 I will figure our and propose something.