fix: prevent sidebar panel from appearing on window resize

[khushiiagrawal]

Description

Fixed an issue where the WecsDetailsPanel sidebar (containing "Summary" and "Edit" buttons) would unintentionally appear when reducing the browser window size below a certain breakpoint. The panel was sliding in from the right side even when no node was selected, causing UI disruption.

Related Issue

Fixes #2254

Changes Made

• Fixed panel positioning to ensure it stays completely off-screen when closed
• Changed panel right position from -80vw to -100vw when isOpen is false
• Added pointerEvents: 'none' to prevent interaction when panel is closed
• Added visibility: hidden to ensure panel is not visible when closed
• Added maxWidth: '600px' to limit panel width on larger screens

Checklist

Please ensure the following before submitting your PR:

• I have reviewed the project's contribution guidelines.
• I have written unit tests for the changes (if applicable).
• I have updated the documentation (if applicable).
• I have tested the changes locally and ensured they work as expected.
• My code follows the project's coding standards.

Screenshots or Logs (if applicable)

Screen.Recording.2025-11-21.at.10.57.11.PM.mov

[kubestellar-prow]

[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 onkar717 for approval. For more information see the Kubernetes Code Review Process.

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

Needs approval from an approver in each of these files:

• OWNERS

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

[kubestellar-prow]

Hi @khushiiagrawal. 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.

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.

[Copilot]

Pull request overview

This PR fixes a bug where the WecsDetailsPanel sidebar would unintentionally appear during window resize events even when no node was selected. The fix enhances the panel's positioning and visibility controls to ensure it remains completely off-screen and non-interactive when closed.

Key Changes:

• Improved off-screen positioning from -80vw to -100vw to ensure complete panel concealment
• Added interaction prevention via pointerEvents and visibility properties
• Introduced maxWidth: '600px' to improve UX on larger displays

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[adity1raut]

This is Already Solve In #2256

[khushiiagrawal]

This is Already Solve In #2256

@adity1raut please read the issue and the PR, the issue is in the deployed workload
i reviewed your PR, the issue is still there and the horizontal panel to vertical panel is also not fixed in the deployed workload page which i have solved in the PR #2261

This PR resolves the issue #2254

[khushiiagrawal]

/cc PTAL @kunal-511 @btwshivam
thank you

[kubestellar-prow]

@khushiiagrawal: GitHub didn't allow me to request PR reviews from the following users: PTAL.

Note that only kubestellar members and repo collaborators can review this PR, and authors cannot review their own PRs.

In response to this:

/cc PTAL @kunal-511 @btwshivam
thank you

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.

[Per0x1de-1337]

/ok-to-test

[btwshivam]

@khushiiagrawal Test if after adding 2-3 big helm charts
share a video

[btwshivam]

Also, remove unwanted comments

[khushiiagrawal]

@khushiiagrawal Test if after adding 2-3 big helm charts share a video

Screen.Recording.2025-11-28.at.10.56.22.PM.mov

[khushiiagrawal]

Also, remove unwanted comments

I have removed it.
Thanks!