aminghadersohi opened a new pull request, #39971:
URL: https://github.com/apache/superset/pull/39971
### 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, which is 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) so spacing between
stacked selects is consistent with the rest of the panel.
**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 visible breathing room (12px) between the tab bar and
the first form control below it
6. Verify: spacing between stacked form controls (column → aggregate in
metric editor; subject → operator → comparator in filter editor) is 8px, not
24px
### ADDITIONAL INFORMATION
- [ ] Has associated issue:
- [ ] Required feature flags:
- [x] Changes UI
- [ ] Includes DB Migration (follow approval process in
[SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] 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
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
