innovark37 opened a new issue, #36795: URL: https://github.com/apache/superset/issues/36795
## Screenshot <img width="405" height="595" alt="Image" src="https://github.com/user-attachments/assets/c0f66870-f901-45af-84bc-990d9f3a6a56"; /> <img width="43" height="50" alt="Image" src="https://github.com/user-attachments/assets/3b7450b3-0327-4509-bd68-1412937d004a"; /> <img width="405" height="591" alt="Image" src="https://github.com/user-attachments/assets/70ae913a-3a0a-443a-ab73-2001dd369e86"; /> <img width="48" height="58" alt="Image" src="https://github.com/user-attachments/assets/a860b6a8-7833-4659-b405-a99deb92cb0f"; /> ## 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 ```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 -- 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]
