fix: south pane scrolling issues

[eschutho]

SUMMARY

Fixes scrolling issues where the tabs were overlapping the table and also where the last row was being cut off.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

southpane2.mov

TEST PLAN

manual visual testing.. all other tests should still pass

ADDITIONAL INFORMATION

• Has associated issue: SQL Lab results row height/width is too short for last row #9869, SQL lab results cut off #11966, SQL Lab UI cosmetic issues - buttons overlap when scrolling, results area doesn't adjust size #12046
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[eschutho]

cc @rusackas

[codecov-io]

Codecov Report

Merging #12318 (90f9f21) into master (b61e243) will decrease coverage by 0.05%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master   #12318      +/-   ##
==========================================
- Coverage   67.11%   67.05%   -0.06%     
==========================================
  Files         967     1001      +34     
  Lines       47508    49384    +1876     
  Branches     4632     5033     +401     
==========================================
+ Hits        31884    33114    +1230     
- Misses      15505    16142     +637     
- Partials      119      128       +9     

Flag	Coverage Δ
cypress	51.23% <100.00%> (+0.63%)	⬆️
javascript	60.99% <100.00%> (-1.81%)	⬇️
python	64.19% <ø> (+0.16%)	⬆️

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

Impacted Files	Coverage Δ
...erset-frontend/src/SqlLab/components/SouthPane.jsx	82.97% <100.00%> (+1.16%)	⬆️
...src/components/FilterableTable/FilterableTable.tsx	82.17% <100.00%> (+0.08%)	⬆️
superset-frontend/src/components/Hotkeys.jsx	0.00% <0.00%> (-100.00%)	⬇️
...end/src/SqlLab/components/TemplateParamsEditor.jsx	13.88% <0.00%> (-72.23%)	⬇️
...perset-frontend/src/common/components/Dropdown.tsx	58.97% <0.00%> (-41.03%)	⬇️
...frontend/src/explore/components/OptionControls.tsx	75.60% <0.00%> (-24.40%)	⬇️
superset-frontend/src/setup/setupColors.js	77.77% <0.00%> (-22.23%)	⬇️
...rc/views/CRUD/alert/components/AlertStatusIcon.tsx	46.87% <0.00%> (-17.23%)	⬇️
...erset-frontend/src/SqlLab/components/SaveQuery.tsx	72.72% <0.00%> (-15.37%)	⬇️
superset/db_engine_specs/postgres.py	85.96% <0.00%> (-14.04%)	⬇️
... and 206 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 b61e243...346230a. Read the comment docs.

[rusackas]

the css prop approach works, but I kind of lean toward the styled.div implementation like you did with StyledPane. If you did that, you get the bonus win of being able to kill this off from superset-frontend/src/SqlLab/main.less:

.filterable-table-container {
  margin-top: 48px;
}

... and switch it to margin-top: ${({ theme }) => theme.gridUnit * 12}px; for a bonus bonus win ;)

[eschutho]

ok, great. I didn't see that style in less, that's another win for sure. I was thinking something like if you can utilize the style, use styled.div, etc, otherwise css prop?

[rusackas]

In general, this looks like it does a fine job of fixing the acute issue and moving some LESS to Emotion (yay!). Since this is a rush I'm fine with approving this, but I thought I'd point out a few things around theme variables... let me know if you would be able to get those in before merging.

[eschutho]

Thanks for the review @rusackas! I addressed 3/4 and saved one for later.

[eschutho]

@rusackas @betodealmeida @hughhhh @dpgaspar Can someone merge this in for tomorrow's branch cut? Thanks

[rusackas]

Thanks for the great work, @eschutho!

[ktmud]

Closes #12046