fix(dashboard): nested rows and columns with hovered menu

[kkucharc]

SUMMARY

When we have nested rows and columns in the dashboard the hovered menu is not visible or have not enough space.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before

After

closes #12601

TEST PLAN

1. Go to Dashboard and pick World's Bank Data
2. Go to edit mode
3. Check mouse over various charts

or
Create own dashboard and nest a lot of charts and rows.

ADDITIONAL INFORMATION

• Has associated issue: [dashboard]Edit mode row control icons set misalignment  #12601
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[kkucharc]

cc: @adam-stasiak @junlincc

[kkucharc]

I have just a design question here:
if the new top margin is ok should I move also native filter icons or those should remain in same place?

@junlincc

[codecov-io]

Codecov Report

Merging #12603 (5507398) into master (9771b82) will decrease coverage by 7.94%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master   #12603      +/-   ##
==========================================
- Coverage   66.76%   58.81%   -7.95%     
==========================================
  Files        1015      959      -56     
  Lines       49642    46878    -2764     
  Branches     4970     4353     -617     
==========================================
- Hits        33141    27571    -5570     
- Misses      16378    19307    +2929     
+ Partials      123        0     -123     

Flag	Coverage Δ
cypress	50.98% <100.00%> (ø)
javascript	?
python	63.22% <ø> (-0.75%)	⬇️

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

Impacted Files	Coverage Δ
...tend/src/dashboard/components/DashboardBuilder.jsx	86.41% <100.00%> (ø)
...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%)	⬇️
... and 403 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 9771b82...5507398. Read the comment docs.

[adam-stasiak]

Tested manually across safari,chrome,firefox. No issues spotted 🟢

[adam-stasiak]

During testing I observed that extremely useful would be to have kind of more obvious graphical option to show exactly which area delete operation touches -> I mean I would love to see much bolder line because this blue one is hard to spot. What do you think @junlincc ?

[junlincc]

@mihir174 Mihir, @ktmud and I have been making ad hoc design decisions more than we should for the product. I will leave above question from @adam-stasiak to you.

[junlincc]

Tested, better than before! thanks for the fix!

i wanted to rip the dashboard out lol, the entire drag & drop + move row & column + adjust chart size experience is just not intuitive(horrible🤦🏾‍♀️). we are piling fixes on a shaky foundation.

[mihir174]

@kkucharc i think that the native filter icons should remain in the same place

[kkucharc]

Hi, @ktmud @villebro do you mind taking a look if those changes are ok with you?

[villebro]

LGTM and makes sense. I agree with @junlincc that some more fundamental redesign might be needed here, but in the short term this is a really good fix.