Bug(chart): Three-dot menu button alignment broken by linkHoverBg theme token

[innovark37]

Screenshot

Description

The three-dot menu button on chart has a visual alignment issue when a custom theme defines a linkHoverBg color for buttons. The icon appears off-center, pushed to the right edge of the button's hover background area.

Current Behavior

Default theme:

• linkHoverBg is transparent by default
• Button has padding-right: 0
• Icon appears visually centered ✅

Custom theme:

• linkHoverBg is not transparent, e.g., rgba(0,0,0,0.04)
• Button has padding-right: 0
• Icon appears pushed to the right edge of the hover background ❌

Root Causes

1. CSS issue: padding-right: 0 removes necessary spacing for the hover background
2. Semantic issue: Using buttonStyle="link" for a menu toggle button (not an actual link)
3. Theme incompatibility: Custom theme tokens expose the layout flaw

Steps to Reproduce

1. Apply custom theme in config.py

THEME_DEFAULT = {
    "components": {
      "Button": {
        "linkHoverBg": "rgba(0,0,0,0.04)"
      }
    },
    "algorithm": "default",
}
THEME_DARK = {
    "components": {
      "Button": {
        "linkHoverBg": "rgba(255,255,255,0.08)"
      }
    },
    "algorithm": "dark",
}

2. Navigate to any dashboard with charts
3. Hover over any chart's three-dot menu button (top-right corner)
4. Observe the visual defect - three-dot icon is not centered within the hover background

[dosubot]

This alignment issue with the three-dot menu button is a known UI inconsistency that becomes visible when a custom theme sets a non-transparent linkHoverBg. The root cause is the lack of right padding when the hover background is visible, which pushes the icon to the edge. There are open pull requests aiming to standardize and fix the styling and alignment of these menu buttons across Superset, including consistent margins, padding, and icon alignment, but these are not yet merged into the main codebase (PR #36330, PR #36671).

A recommended approach is to ensure the menu button component always includes appropriate horizontal padding, regardless of the theme or background, and to avoid using buttonStyle="link" if it causes semantic or layout issues. As a temporary workaround, you can add a custom CSS override to restore right padding for the menu button when a non-transparent linkHoverBg is set. For a more robust fix, keep an eye on the progress of the referenced PRs, which will unify and correct these inconsistencies once merged.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[rajatmohan22]

Hey @innovark37, Thanks for bringing this up, and thanks @dosubot for the clear explanation. 😄

I'd be happy to help with this problem. This is how I plan to do it:

The suggested method:

• Find the three-dot menu button part that is used in chart headers. It is probably in the chart controls or menu trigger part.
• To reproduce the problem on your own computer, use a custom theme with a linkHoverBg that isn't transparent, as shown.
• Change the styles of the buttons so that the horizontal padding is the same on all of them (for example, add back the right and left padding). This will keep the icon visually centered even when a hover background is added.
• Check to see if buttonStyle="link" makes sense for this menu toggle. If it doesn't, switch to a button style that does to avoid layout problems.
• Check the fix in both the default and dark themes to make sure it doesn't break any existing styles.
• To make things clearer, add screenshots of the PR before and after.

If this sounds good, I'll get started on a patch right away. Thank you!

[innovark37]

@rajatmohan22
Perfect! Your plan sounds great and covers all the important points. I appreciate you taking this on. Looking forward to seeing the patch! 👍