🐛 Fix sidebar collapse and pin icons overlapping with sidebar content

[shubhamkumar9199]

📌 Fixes

Fixes #3886

📝 Summary of Changes

• Fixed collapse chevron and pin icons overlapping with sidebar content
• Adjusted button container positioning from sidebarWidth - 14 to sidebarWidth + 4 so icons render outside the sidebar border
• Added smooth transition-[left] to keep icons in sync with sidebar collapse/expand animation

---

Changes Made

• Fixed icon positioning in web/src/components/layout/Sidebar.tsx

---

Checklist

• I used a coding agent (Claude Code) to generate/review this code
• I have reviewed the project's contribution guidelines
• New cards target console-marketplace, not this repo
• isDemoData is wired correctly (cards show Demo badge when using demo data)
• I have tested the changes locally and ensured they work as expected
• All commits are signed with DCO (git commit -s)

---

Screenshots or Logs (if applicable)

Before:

After:

---

👀 Reviewer Notes

The collapse (<) and pin icons were positioned at sidebarWidth - 14, placing them half-inside the sidebar. Changed to sidebarWidth + 4 so they sit just outside the sidebar border. Added transition-[left] duration-300 to match the sidebar's existing collapse animation.

[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 clubanderson 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:

• OWNERS

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

[netlify]

✅ Deploy Preview for kubestellarconsole ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	9ddfe1d
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellarconsole/deploys/69c9bd2f06b36f00089b35be
😎 Deploy Preview	https://deploy-preview-3887.console-deploy-preview.kubestellar.io
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

👋 Hey @shubhamkumar9199 — thanks for opening this PR!

🤖 This project is developed exclusively using AI coding assistants.

Please do not attempt to code anything for this project manually.
All contributions should be authored using an AI coding tool such as:

• Claude Code (Opus 4.5 / 4.6) — recommended
• GitHub Copilot
• Cursor
• Other AI coding assistants

This ensures consistency in code style, architecture patterns, test coverage,
and commit quality across the entire codebase.

---

This is an automated message.