fix: list filters vertical alignment

[michael-s-molina]

SUMMARY

Fix list filters vertical alignment.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

1 - Go to main lists (databases, datasets, charts and dashboards)
2 - All filters labels should be vertically aligned with values

@junlincc

ADDITIONAL INFORMATION

• Has associated issue:
• 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 #12497 (bd69d55) into master (7aba4c2) will decrease coverage by 7.11%.
The diff coverage is 75.00%.

@@            Coverage Diff             @@
##           master   #12497      +/-   ##
==========================================
- Coverage   66.29%   59.17%   -7.12%     
==========================================
  Files        1015      959      -56     
  Lines       49554    46832    -2722     
  Branches     5079     4344     -735     
==========================================
- Hits        32854    27715    -5139     
- Misses      16562    19117    +2555     
+ Partials      138        0     -138     

Flag	Coverage Δ
cypress	50.94% <0.00%> (+3.83%)	⬆️
javascript	?
python	63.81% <81.81%> (-0.28%)	⬇️

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

Impacted Files	Coverage Δ
...t-frontend/src/components/ListView/Filters/Base.ts	100.00% <ø> (ø)
...end/src/views/CRUD/data/database/DatabaseModal.tsx	68.96% <0.00%> (+12.63%)	⬆️
superset/databases/schemas.py	99.45% <ø> (-0.55%)	⬇️
superset/db_engine_specs/druid.py	88.63% <33.33%> (+27.27%)	⬆️
superset/db_engine_specs/postgres.py	86.84% <89.47%> (+0.87%)	⬆️
...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%)	⬇️
... and 419 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 40a334a...bd69d55. Read the comment docs.

[willbarrett]

Hey @michael-s-molina this still looks a pixel low. Better than before though! Happy to merge as-is if there's an issue bumping that 1 more pixel up.

[michael-s-molina]

Hey @willbarrett you're absolutely right! Thanks for the eagle eyes! I'll fix it.

[rusackas]

@michael-s-molina I see another route to fixing this that may make sense.

In Base.ts add align-items to FilterContainer, i.e.:

export const FilterContainer = styled.div`
  display: inline-flex;
  margin-right: 2em;
  font-size: ${({ theme }) => theme.typography.sizes.s}px;
  align-items: center;
`;

... and in FilterTitle remove the line-height, i.e.:

export const FilterTitle = styled.label`
  font-weight: bold;
  margin: 0 0.4em 0 0;
`;

then you should come out clean without having to nudge any pixels around.

[michael-s-molina]

@rusackas Applied your suggestion. Thanks!

[rusackas]

LGTM, but @nytai owns this so I'll let him 👀 & ✅ & 🔀

[nytai]

thanks for the fix!

[junlincc]

let's get this one in for rc3. current state looks bad.