Conversation
There was a problem hiding this comment.
Code Review
This pull request modifies the badge component's styling by changing its display property from inline-flex to flex. The review feedback correctly identifies that this change converts the badge into a block-level element, which typically conflicts with the expected inline behavior of a badge component. It is recommended to revert this change to maintain proper layout integration.
| /* Visible with forced colors */ | ||
| outline: transparent solid to-rem(1); | ||
| display: inline-flex; | ||
| display: flex; |
There was a problem hiding this comment.
Changing display: inline-flex to display: flex makes the badge a block-level element. This causes the component to occupy the full width of its container and start on a new line, which is typically not the expected behavior for a badge. Badges are generally expected to be inline elements. If the goal is to allow the badge to grow in certain contexts, it is recommended to keep inline-flex and manage the growth via the host element's styling (e.g., flex-grow or width) in the parent layout.
| display: flex; | |
| display: inline-flex; |
|
🚀 MCP preview deployed to Vercel: https://kolibri-ejk9870bl-public-ui-kolibri-mcp.vercel.app |
|
Netlify Draft Deployment |
badges button is right aligned
No description provided.