Skip to content

Conversation

@a-jih
Copy link

@a-jih a-jih commented Apr 2, 2025

Description

Currently, pt-0 is applied to subsequent command group siblings in CommandDialog. This makes sense when one command group immediately proceeds another, maintaining even spacing between each group. However, we also end up removing the top padding on command groups that immediately proceed a separator, which makes the spacing between a group and separator visually inconsistent with that between the first group and the command input.

To address this, we can update the following class to use the next- sibling combinator (+) instead of the subsequent sibling combinator (~) to target only command groups that immediately proceed another:

[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0

becomes:

[&_[cmdk-group]:not([hidden])_+[cmdk-group]]:pt-0

Screenshots

Observe the spacing above "Settings". It should now be consistent with the spacing above "Suggestions".

Before After
Screenshot 2025-04-02 at 10 35 31 AM Screenshot 2025-04-02 at 10 35 01 AM

@vercel
Copy link
Contributor

vercel bot commented Apr 2, 2025

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

A member of the Team first needs to authorize it.

a-jih added 2 commits April 2, 2025 10:51
Currently, pt-0 is applied to subsequent command group siblings in
CommandDialog. This makes sense when one command group immediately
proceeds another, maintaining even spacing between each group.
However, we also end up removing the top padding on command groups
that immediately proceed a separator, which makes the spacing
between a group and separator visually inconsistent with that
between the first group and the command input.

To address this, we can update the following class to use the next-
sibling combinator (+) instead of the subsequent sibling
combinator (~) to target only command groups that immediately
proceed another:

  [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0

becomes:

  [&_[cmdk-group]:not([hidden])_+[cmdk-group]]:pt-0
Currently, pt-0 is applied to subsequent command group siblings in
CommandDialog. This makes sense when one command group immediately
proceeds another, maintaining even spacing between each group.
However, we also end up removing the top padding on command groups
that immediately proceed a separator, which makes the spacing
between a group and separator visually inconsistent with that
between the first group and the command input.

To address this, we can update the following class to use the next-
sibling combinator (+) instead of the subsequent sibling
combinator (~) to target only command groups that immediately
proceed another:

  [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0

becomes:

  [&_[cmdk-group]:not([hidden])_+[cmdk-group]]:pt-0
@a-jih a-jih force-pushed the command-dialog-inconsistent-styles branch from a5943b3 to a9f8916 Compare April 2, 2025 17:51
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