fix(date-range-picker): improve responsiveness #4625
Conversation
🦋 Changeset detectedLatest commit: 9c09dfa The changes in this PR will be included in the next version bump. This PR includes changesets to release 12 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@Ruchiket100 is attempting to deploy a commit to the HeroUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe pull request introduces a styling modification to the Changes
Assessment against linked issues
Sequence DiagramsequenceDiagram
participant DateInput as Date Input Component
participant InnerWrapper as Inner Wrapper Slot
DateInput->>InnerWrapper: Apply overflow classes
InnerWrapper-->>DateInput: Enable horizontal scrolling
InnerWrapper-->>DateInput: Prevent vertical overflow
InnerWrapper-->>DateInput: Hide scrollbar
The sequence diagram illustrates how the new CSS classes are applied to the inner wrapper, modifying its overflow and scrolling behavior to potentially address the responsiveness issue reported in the linked bug. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/core/theme/src/components/date-input.ts (1)
27-27: LGTM! The overflow handling implementation looks good.The addition of overflow control classes effectively addresses the horizontal overflow issue while maintaining a clean UI by hiding the scrollbar. This is a robust solution implemented at the theme level.
Consider adding a comment above this line to document the overflow behavior for future maintainers.
+ // Enable horizontal scrolling while preventing vertical overflow "overflow-y-hidden overflow-x-auto scrollbar-hide",
Ruchiket100
force-pushed
the
fix/DateRangePicker-responsiveness
branch
from
4e8b293 to
9c09dfa
Compare
it hides scrollbar, which is visible when range overflows |
|
Never mind. found it from |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -24,6 +24,7 @@ const dateInput = tv({ | |||
| input: "flex h-full gap-x-0.5 w-full font-normal", | |||
| innerWrapper: [ | |||
| "flex items-center text-default-400 w-full gap-x-2 h-6", | |||
| "overflow-y-hidden overflow-x-auto scrollbar-hide", | |||
There was a problem hiding this comment.
Do we need overflow-y-hidden here?
fixes x overflow of range input components
Closes #4613
📝 Description
This pull request addresses the issue of horizontal overflow in the date range picker input. It adds horizontal scrolling to the input wrapper, ensuring that the content is properly contained and remains accessible even when the input exceeds the available width. This enhancement improves the overall usability and visual appearance of the date range picker component.
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No): No
📝 Additional Information
Recording.2025-01-23.023338.mp4
Summary by CodeRabbit