chore: update default width of dialog #3283
Conversation
ogzhanolguncu
requested review from
perkinsjr,
chronark and
mcstepp
as code owners
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
📝 WalkthroughWalkthroughThe changes adjust layout and styling for dialog components and form elements to improve responsiveness and scrolling. These updates include increasing container widths, adding scrollable areas within dialogs, enhancing responsive sizing, and modifying padding and JSX structure without modifying any logic, event handling, or exported entity declarations. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧬 Code Graph Analysis (1)apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/ratelimit-setup.tsx (2)
⏰ Context from checks skipped due to timeout of 90000ms (5)
🔇 Additional comments (2)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/components/dialog-container/dialog-container.tsx (1)
34-34: Responsive sizing classes applied to DialogContent
The responsive width (w-[90%] … 2xl:w-[45%]) and max-height utilities improve the dialog’s adaptability across viewports. Consider removing the duplicatemax-h-[90vh]entry in the class list to keep it concise.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/external-id-field.tsx(1 hunks)apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-ratelimits/index.tsx(2 hunks)apps/dashboard/components/dialog-container/dialog-container.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (10)
- GitHub Check: Test Packages / Test ./apps/dashboard
- GitHub Check: Test Packages / Test ./packages/rbac
- GitHub Check: Test Packages / Test ./packages/api
- GitHub Check: Test Packages / Test ./packages/nextjs
- GitHub Check: Test Packages / Test ./packages/hono
- GitHub Check: Test Packages / Test ./internal/clickhouse
- GitHub Check: Test Packages / Test ./internal/encryption
- GitHub Check: Test Packages / Test ./internal/id
- GitHub Check: autofix
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (3)
apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/external-id-field.tsx (1)
110-110: Increase max-width for empty message container
Raising the container’s max-width from 460px to 600px brings this empty-state UI in line with other dialogs and enhances readability on larger screens.apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/actions/components/edit-ratelimits/index.tsx (2)
86-87: Add flex layout props to DialogContainer
ApplyingclassName="flex flex-col"andcontentClassName="flex flex-col flex-1 min-h-0"establishes a columnar flex layout and ensures the content area can grow/shrink correctly within its bounds.
105-114: Wrap dialog body in a scrollable container
Introducing the<div className="flex-1 overflow-y-auto min-h-0">correctly confines vertical overflow while preserving min-height constraints, improving usability when content exceeds available space.
|
not a regression but I cannot unseen this now |
|
wdym? |
|
look at the widths of the boxes |
|
LOL |
|
on it |
|
it’s also not super nice to have the scrollbar overlap the content, but I actually don’t know how we could fix that |
|
we can hide it and its probably a good choice, because content is already overflowed so users can understand |
|
sgtm if that’s not an a11y issue |
![CleanShot 2025-05-29 at [email protected]](https://files.slack.com/files-pri/T05T2KX8C3X-F08UHMFB274/cleanshot_2025-05-29_at_11.01.53_2x.png){kind=link}
|
Good catch. That was a regression 🫡 |
What does this PR do?
Fixes # (issue)
If there is not an issue for this, please create one first. This is used to tracking purposes and also helps use understand why this PR exists
Type of change
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
This shows key ratelimit update fixed submit button.
Summary by CodeRabbit