fix: improve AvatarModal responsiveness for mobile screens#341
fix: improve AvatarModal responsiveness for mobile screens#341ProthamD wants to merge 1 commit intoAOSSIE-Org:mainfrom
Conversation
📝 WalkthroughWalkthroughThe Avatar Modal component was refactored to improve mobile responsiveness. Horizontal padding was reduced on smaller screens, grid layouts adjusted from fixed 5-column to responsive 4-column baseline with 5 columns on larger screens, button sizes adapted for screen sizes, and margins reorganized for consistent vertical stacking across all avatar customization sections. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
frontend/src/components/AvatarModal.tsx (2)
443-443: Consider 3-column layout for smallest screens per issue#275.The linked issue suggests
grid-cols-3 sm:grid-cols-4 md:grid-cols-5for optimal touch targets. The currentgrid-cols-4 sm:grid-cols-5works but may feel cramped at 320px. If testing confirmed usability at that width, this is fine—otherwise consider aligning with the issue's recommendation.♻️ Optional: Align with issue recommendations
- <div className='grid grid-cols-4 sm:grid-cols-5 gap-2 sm:gap-4 mt-2'> + <div className='grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2 sm:gap-4 mt-2'>Apply similar changes to all other grids (background color, ear, eyes, cheek, face, front hair, hair, mouth, sideburn, skin color).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/AvatarModal.tsx` at line 443, Update the avatar option grids to use a 3-column layout on the smallest screens by replacing instances of "grid-cols-4 sm:grid-cols-5" with "grid-cols-3 sm:grid-cols-4 md:grid-cols-5" (start with the div in AvatarModal.tsx that currently has className 'grid grid-cols-4 sm:grid-cols-5 gap-2 sm:gap-4 mt-2'). Also apply the same class change to the other avatar option grid containers (background color, ear, eyes, cheek, face, front hair, hair, mouth, sideburn, skin color) so all option grids match the recommended responsiveness and provide better touch targets on narrow screens.
448-452: Consider extracting repeated button className pattern.The responsive button classes (
w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 transition-all duration-200) are repeated across all 11 option grids. Extracting this to a constant or utility would improve maintainability.♻️ Optional: Extract common button styles
// Near the top of the component or in a shared styles file const optionButtonBase = 'w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 transition-all duration-200'; // Usage in buttons <button className={`${optionButtonBase} ${ seed === s ? 'border-primary scale-110' : 'border-transparent hover:border-muted' }`} >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/AvatarModal.tsx` around lines 448 - 452, Multiple buttons in AvatarModal.tsx repeat the same responsive class string; extract that into a shared constant (e.g., optionButtonBase) at the top of the AvatarModal component or a shared styles file and replace each repeated literal with a template using optionButtonBase plus the conditional part that checks seed === s (the existing ternary that applies 'border-primary scale-110' or 'border-transparent hover:border-muted'); update all 11 option grids' button className usages so they reference optionButtonBase to avoid duplication and keep behavior identical.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@frontend/src/components/AvatarModal.tsx`:
- Line 443: Update the avatar option grids to use a 3-column layout on the
smallest screens by replacing instances of "grid-cols-4 sm:grid-cols-5" with
"grid-cols-3 sm:grid-cols-4 md:grid-cols-5" (start with the div in
AvatarModal.tsx that currently has className 'grid grid-cols-4 sm:grid-cols-5
gap-2 sm:gap-4 mt-2'). Also apply the same class change to the other avatar
option grid containers (background color, ear, eyes, cheek, face, front hair,
hair, mouth, sideburn, skin color) so all option grids match the recommended
responsiveness and provide better touch targets on narrow screens.
- Around line 448-452: Multiple buttons in AvatarModal.tsx repeat the same
responsive class string; extract that into a shared constant (e.g.,
optionButtonBase) at the top of the AvatarModal component or a shared styles
file and replace each repeated literal with a template using optionButtonBase
plus the conditional part that checks seed === s (the existing ternary that
applies 'border-primary scale-110' or 'border-transparent hover:border-muted');
update all 11 option grids' button className usages so they reference
optionButtonBase to avoid duplication and keep behavior identical.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2427bd14-d876-453e-8d28-63eae177b0e7
📒 Files selected for processing (1)
frontend/src/components/AvatarModal.tsx
1 participant
fixes #275
fix: improve AvatarModal responsiveness for mobile screens
The
AvatarModalcomponent used fixed pixel sizes and static grid layouts that caused overflow and clipping on small/mobile screens. This PR replaces all fixed sizing with responsive Tailwind classes so the modal renders correctly across all viewport widths.Problem
w-32 h-32— too large on small screensgrid-cols-5) with fixedw-16 h-16buttons overflowed on narrow viewportspx-6 pb-6) with no mobile adjustmentml-6margin pushed content off-screen on small devicesChanges
px-6 pb-6px-3 sm:px-6 pb-3 sm:pb-6w-32 h-32w-20 h-20 sm:w-32 sm:h-32grid-cols-5grid-cols-4 sm:grid-cols-5w-16 h-16w-12 h-12 sm:w-16 sm:h-16grid-cols-5grid-cols-4 sm:grid-cols-5w-16 h-16w-12 h-12 sm:w-16 sm:h-16grid-cols-5grid-cols-3 sm:grid-cols-5w-16 h-16w-12 h-12 sm:w-16 sm:h-16ml-6Testing
Verified layout at 320 px, 375 px, and 768 px+ viewports — no overflow, clipping, or misaligned elements observed.
Related
Fixes avatar rendering responsiveness on the Profile page (visible in the screenshot attached to the issue).
Summary by CodeRabbit
Release Notes
ai usage: I didn't use any kind of ai for code generation