Skip to content

fix: remove extra mx-2 from SidebarSeparator to prevent border overflow in Tailwind v4 #7270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

MrJs6781
Copy link

Fix Sidebar Separator Overflow Issue

This PR fixes a visual bug where the horizontal separator in the sidebar extended beyond the border after upgrading to Tailwind CSS v4 and React 19.

Issue Description

The mx-2 class on the SidebarSeparator component caused the separator to overflow the sidebar border, creating unwanted spacing and visual inconsistency.

Solution

Removed the mx-2 class from the SidebarSeparator component. The separator now aligns properly with the sidebar borders.

Testing Instructions

  1. Open the sidebar and inspect the separator
  2. Verify the separator no longer overflows the sidebar borders
  3. Check alignment in different sidebar states
  4. Test across various screen sizes

Expected Results

  • Separator should be flush with sidebar borders
  • No visual overflow or unwanted spacing
  • Consistent appearance across all states and screen sizes

Copy link

vercel bot commented Apr 24, 2025

@MrJs6781 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

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