Skip to content

Conversation

@ma-r-s
Copy link

@ma-r-s ma-r-s commented Oct 9, 2025

Problem
When variant="inset", state="collapsed", and collapsible="icon", the sidebar becomes misaligned due to the inset's left margin.

Solution
Added the following Tailwind utility to remove the margin in this specific state:
md:peer-data-[variant=inset]:peer-data-[state=collapsed]:peer-data-[collapsible=icon]:ml-0

Result
This ensures the sidebar aligns correctly in this specific situation.

Testing

  1. Set variant="inset" and collapsible="icon" on the sidebar.
  2. Collapse it.
  3. Sidebar now remains properly aligned.

…ns when

sidebar is in inset variant, collapsed state, and icon collapsible mode.
@changeset-bot
Copy link

changeset-bot bot commented Oct 9, 2025

⚠️ No Changeset found

Latest commit: 396c90b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copilot AI review requested due to automatic review settings October 23, 2025 20:21
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 sidebar alignment issue when using specific configuration options. When the sidebar is configured with variant="inset", state="collapsed", and collapsible="icon", the inset's left margin causes misalignment.

Key Changes:

  • Added a Tailwind utility class to override the left margin specifically when all three conditions are met (variant=inset, state=collapsed, collapsible=icon)

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant