fix(explore): restore spacing between tabs and content in control popovers

[kasiazjc]

SUMMARY

The Superset global Tabs styled component overrides antd's default margin-bottom on .ant-tabs-nav to 0, which removed all visual separation between the tab bar and the form content inside explore control popovers (metric editor, column selector, filter editor). This also caused the spacing between form items inside those popovers to fall back to antd's default FormItem margin-bottom of 24px — far too large for a compact popover panel.

Changes:

• ExplorePopoverContent – adds && .ant-tabs-nav { margin-bottom: 12px } and && .ant-form-item { margin-bottom: 8px } using the doubled && class to win the CSS specificity race against the per-instance Tabs CSS (which injects at component render time, after global styles). Only affects Tabs inside explore popover content, not Tabs elsewhere in the app.
• FilterPopoverContentContainer – removes two dead CSS selectors that referenced Bootstrap class names (.nav-tabs, .adhoc-filter-simple-column-dropdown) which never matched any elements after the antd migration.
• FilterActionsContainer / LayerSelectContainer – replaces sizeUnit arithmetic with the named antd spacing tokens (marginXS, marginXXL, marginMD).
• AdhocFilterEditPopoverSimpleTabContent – removes the redundant marginTop from the subject (column) Select — the tab bar's own bottom margin now provides the leading gap — and reduces marginTop/marginBottom on filter selects from sizeUnit * 4 (legacy) to marginXS (8px) for consistency.

Spacing result (all explore control popovers):

Gap	Value	Token
Tab bar → first item	12px	marginSM
Between form items	8px	marginXS
Between filter selects	8px	marginXS

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before: The tab bar was flush against the form content (0px gap). FormItems had 24px separation.

After: 12px below the tab bar, 8px between form items — consistent with compact antd panel conventions.

TESTING INSTRUCTIONS

1. Open the explore view for any chart
2. Click on a metric to open the metric editor popover (Saved / Simple / Custom SQL tabs)
3. Click on a column to open the column selector popover
4. Click on a filter to open the filter editor popover
5. Verify there is 12px of breathing room between the tab bar and the first form control
6. Verify spacing between stacked form controls is 8px (column → aggregate in metric editor; subject → operator → comparator in filter editor)

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[bito-code-review]

Code Review Agent Run #6d32ea

Actionable Suggestions - 0

Review Details

• Files reviewed - 3 · Commit Range: 0200107..0200107

  • superset-frontend/src/explore/components/ExploreContentPopover.tsx
  • superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.tsx
  • superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[codecov]

Codecov Report

❌ Patch coverage is 75.00000% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 64.08%. Comparing base (460992d) to head (625a1e3).

Files with missing lines	Patch %	Lines
...ols/FilterControl/AdhocFilterEditPopover/index.tsx	50.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #40023      +/-   ##
==========================================
- Coverage   64.08%   64.08%   -0.01%     
==========================================
  Files        2590     2590              
  Lines      137964   137963       -1     
  Branches    31998    31998              
==========================================
- Hits        88409    88407       -2     
- Misses      48037    48038       +1     
  Partials     1518     1518              

Flag	Coverage Δ
javascript	66.99% <75.00%> (-0.01%)	⬇️

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[bito-code-review]

Bito Automatic Review Skipped – PR Already Merged

Bito scheduled an automatic review for this pull request, but the review was skipped because this PR was merged before the review could be run.
No action is needed if you didn't intend to review it. To get a review, you can type /review in a comment and save it