fix: make keys UI responsive to mobile devices #2145
Conversation
geraldmaboshe
requested review from
perkinsjr,
chronark and
mcstepp
as code owners
|
|
Someone is attempting to deploy a commit to the Unkey Team on Vercel. A member of the Team first needs to authorize it. |
|
|
📝 Walkthrough📝 WalkthroughWalkthroughThe changes made in the pull request focus on the Changes
Assessment against linked issues
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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
CodeRabbit Configuration File (
|
github-actions
bot
added
🕹️ 50 points
Bug
|
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
🧹 Outside diff range and nitpick comments (1)
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/keys.tsx (1)
Line range hint
1-146: Consider additional responsive design improvementsWhile the change made is a great start in addressing the mobile responsiveness issue, consider the following suggestions to further enhance the mobile user experience:
Key item layout: The content within each key item (name, ID, environment, permissions, roles) might benefit from a more stacked layout on mobile. Consider using flexbox with
flex-direction: columnfor smaller screens.Badges and buttons: The badges for environment, permissions, and roles, as well as the chevron button, might need adjustments for smaller screens. Consider reducing their size or stacking them vertically on mobile.
Empty state placeholder: Ensure that the empty state layout (including the buttons) is responsive and properly aligned on mobile devices.
Here's a sample of how you might implement some of these changes:
<Link href={`/apis/${apiId}/keys/${k.keyAuthId}/${k.id}`} key={k.id} className="grid items-center sm:grid-cols-12 px-4 py-2 duration-250 hover:bg-background-subtle gap-2" > <div className="flex flex-col items-start col-span-6 sm:col-span-4"> <span className="text-sm text-content">{k.name}</span> <pre className="text-xs text-content-subtle">{k.id}</pre> </div> <div className="flex flex-wrap items-center col-span-6 sm:col-span-8 gap-2"> {k.environment && <Badge variant="secondary">env: {k.environment}</Badge>} <Badge variant="secondary"> {Intl.NumberFormat(undefined, { notation: "compact" }).format(k.permissions)} Permission {k.permissions !== 1 ? "s" : ""} </Badge> <Badge variant="secondary"> {Intl.NumberFormat(undefined, { notation: "compact" }).format(k.roles)} Role {k.roles !== 1 ? "s" : ""} </Badge> <Button variant="ghost" className="ml-auto"> <ChevronRight className="w-4 h-4" /> </Button> </div> </Link>These additional changes will help ensure that the Keys UI is fully responsive and provides an optimal experience across all device sizes.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/keys.tsx (1 hunks)
🔇 Additional comments (1)
apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/keys.tsx (1)
101-101: Excellent responsive design improvement!This change effectively addresses the mobile responsiveness issue mentioned in the PR objectives:
- By changing
grid-cols-12tosm:grid-cols-12, the layout now adapts to smaller screens. On mobile devices (smaller than the 'sm' breakpoint), the grid will use a single column layout, preventing overflow issues.- The addition of
gap-2introduces a small gap between grid items, improving spacing and readability, which is particularly beneficial on mobile devices where space is limited.These modifications will significantly enhance the user experience on mobile devices while maintaining the existing layout for larger screens.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hey @geraldmaboshe can you sign the CLA, once done we should be good with this change. Thanks 🙇
|
|
Thanks @perkinsjr. I didn't realize my git config wasn't set up. It should be fixed now |
What does this PR do?
Fixes #2142
This PR fixes the broken Keys UI on mobile devices by making the UI more responsive on smaller devices.
Type of change
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
Keyscomponent with responsive design features for improved layout on different screen sizes.