Skip to content

🐛 fix(ui): prevent trailing dash clipping in cluster names on hover#2415

Open
ANAMASGARD wants to merge 1 commit intokubestellar:devfrom
ANAMASGARD:fix/2300-trailing-dash-clipped-on-hover
Open

🐛 fix(ui): prevent trailing dash clipping in cluster names on hover#2415
ANAMASGARD wants to merge 1 commit intokubestellar:devfrom
ANAMASGARD:fix/2300-trailing-dash-clipped-on-hover

Conversation

@ANAMASGARD
Copy link

@ANAMASGARD ANAMASGARD commented Feb 7, 2026

Root Cause

The NodeLabel component's card style has:

  • overflow: 'hidden' - which clips content
  • transform: scale(1.02) on hover - which scales the content up

When combined, the 2% scale increase caused text at the edges (especially trailing characters like -) to be clipped by the hidden overflow.

Fixes #2300

Screenshot From 2026-02-07 21-17-26

Solution

Changed the overflow property to be dynamic based on hover state:

overflow: isHovered ? 'visible' : 'hidden'

Copilot AI review requested due to automatic review settings February 7, 2026 15:55
@kubestellar-prow kubestellar-prow bot added the dco-signoff: no Indicates the PR's author has not signed the DCO. label Feb 7, 2026
@kubestellar-prow
Copy link

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign kunal-511 for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@github-actions
Copy link
Contributor

github-actions bot commented Feb 7, 2026

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 git commit -s to certify the Developer Certificate of Origin

PR Title - Must start with an emoji: ✨ (feature), 🐛 (bug fix), 📖 (docs), 🌱 (infra/tests), ⚠️ (breaking change)

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!

@kubestellar-prow kubestellar-prow bot added size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test. labels Feb 7, 2026
@kubestellar-prow
Copy link

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 /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Details

Instructions 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.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 NodeLabel card container’s overflow switch to visible while hovered to avoid clipping during transform: scale(1.02).
  • Minor formatting/indentation adjustment in the labels tooltip Chip styling 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>
@ANAMASGARD ANAMASGARD force-pushed the fix/2300-trailing-dash-clipped-on-hover branch from 8cbab6e to 65be3a4 Compare February 7, 2026 16:03
@kubestellar-prow kubestellar-prow bot added dco-signoff: yes Indicates the PR's author has signed the DCO. and removed dco-signoff: no Indicates the PR's author has not signed the DCO. labels Feb 7, 2026
@ANAMASGARD ANAMASGARD changed the title fix(ui): prevent trailing dash clipping in cluster names on hover 🐛 fix(ui): prevent trailing dash clipping in cluster names on hover Feb 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

dco-signoff: yes Indicates the PR's author has signed the DCO. frontend needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test. size/XS Denotes a PR that changes 0-9 lines, ignoring generated files.

Projects

Status: In Progress

Development

Successfully merging this pull request may close these issues.

[Bug]: Trailing dash (-) in cluster name gets clipped on hover

2 participants