fix(dashboard): dropdown indicator in dashboard tabs has proper width and position

[kkucharc]

SUMMARY

Dropdown indicators were moved several pixels to various direction (depending on indicator's area).

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

After with open native filters:

TEST PLAN

1. Go to dashboards
2. Choose a dashboard (can be Tabbed Dashboard
3. Go to edit mode
4. Add chart (or markdown) to the tabs area

ADDITIONAL INFORMATION

• Has associated issue: [Dashboard] native filter and dashboard edit mode #12486
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[kkucharc]

@kgabryje can you take a look? I changed styles added by you.

@adam-stasiak would you find some time for testing?

[codecov-io]

Codecov Report

Merging #12584 (2355eb7) into master (0f243c6) will decrease coverage by 4.26%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #12584      +/-   ##
==========================================
- Coverage   66.75%   62.48%   -4.27%     
==========================================
  Files        1015     1015              
  Lines       49634    49611      -23     
  Branches     4839     4839              
==========================================
- Hits        33131    30999    -2132     
- Misses      16380    18414    +2034     
- Partials      123      198      +75     

Flag	Coverage Δ
cypress	?
javascript	60.73% <ø> (-0.01%)	⬇️
python	63.63% <ø> (-0.33%)	⬇️

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

Impacted Files	Coverage Δ
...d/src/dashboard/components/gridComponents/Tabs.jsx	61.90% <ø> (-13.10%)	⬇️
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/chart/ChartContainer.jsx	0.00% <0.00%> (-100.00%)	⬇️
superset-frontend/src/explore/reducers/index.js	0.00% <0.00%> (-100.00%)	⬇️
...et-frontend/src/dashboard/containers/Dashboard.jsx	0.00% <0.00%> (-100.00%)	⬇️
...et-frontend/src/filters/components/Select/types.ts	0.00% <0.00%> (-100.00%)	⬇️
...t-frontend/src/dashboard/containers/SliceAdder.jsx	0.00% <0.00%> (-100.00%)	⬇️
...t-frontend/src/explore/reducers/getInitialState.js	0.00% <0.00%> (-100.00%)	⬇️
... and 194 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 0f243c6...2355eb7. Read the comment docs.

[kgabryje]

@kkucharc I'm not sure what was the goal of adding these styles, but if everything still works (and works better 🙂) then LGTM!

[ktmud]

Could you also make sure to test when native filters are disabled?

[kkucharc]

Here gif when native filters are disabled:

But let's wait for @adam-stasiak tests :)

[junlincc]

Thanks for the PR!
In chrome, it works better. but still lots of other issues in Firefox.
@rusackas im not sure if we should continue to invest in adding more bandaids trying to dashboard UX or starting looking for a more long term solution. wdyt?

[adam-stasiak]

Looks good to me 🟢 :
With Native filters:

Nagranie.z.ekranu.2021-01-20.o.22.44.53.mov

Without:

Nagranie.z.ekranu.2021-01-20.o.22.45.50.mov