🐛 fix(ui): prevent trailing dash clipping in cluster names on hover#2415
🐛 fix(ui): prevent trailing dash clipping in cluster names on hover#2415ANAMASGARD wants to merge 1 commit intokubestellar:devfrom
Conversation
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
|
Welcome to KubeStellar! 🚀 Thank you for submitting this Pull Request. Before your PR can be merged, please ensure: ✅ DCO Sign-off - All commits must be signed off with ✅ PR Title - Must start with an emoji: ✨ (feature), 🐛 (bug fix), 📖 (docs), 🌱 (infra/tests), Getting Started with KubeStellar: Contributor Resources:
🌟 Help KubeStellar Grow - We Need Adopters! Our roadmap is driven entirely by adopter feedback. Whether you're using KubeStellar yourself or know someone who could benefit from multi-cluster Kubernetes: 📋 Take our Multi-Cluster Survey - Share your use cases and help shape our direction! A maintainer will review your PR soon. Feel free to ask questions in the comments or on Slack! |
|
Hi @ANAMASGARD. Thanks for your PR. I'm waiting for a kubestellar member to verify that this patch is reasonable to test. If it is, they should reply with Once the patch is verified, the new status will be reflected by the I understand the commands that are listed here. DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
There was a problem hiding this comment.
Pull request overview
This PR fixes a UI rendering issue in the topology NodeLabel where cluster names (notably trailing characters like -) were being clipped during the hover scale animation due to overflow: hidden on the card container.
Changes:
- Make the
NodeLabelcard container’soverflowswitch tovisiblewhile hovered to avoid clipping duringtransform: scale(1.02). - Minor formatting/indentation adjustment in the labels tooltip
Chipstyling block (no functional change).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Changed overflow property to be 'visible' when hovered, allowing the scale(1.02) transform to not clip content at the edges. Fixes kubestellar#2300 Signed-off-by: Gauarv Chaudhary <chaudharygaurav2004@gmail.com>
8cbab6e to
65be3a4
Compare
Root Cause
The
NodeLabelcomponent's card style has:overflow: 'hidden'- which clips contenttransform: scale(1.02)on hover - which scales the content upWhen combined, the 2% scale increase caused text at the edges (especially trailing characters like
-) to be clipped by the hidden overflow.Fixes #2300
Solution
Changed the
overflowproperty to be dynamic based on hover state: