Improve category page layout - #105
Merged
Merged
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (2)
WalkthroughReplaces multiple page wrapper Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/`[country]/[locale]/(storefront)/c/[...permalink]/page.tsx:
- Around line 53-71: The banner currently uses category.image_url as a
background and renders dark text (the h1 in the div and the description
paragraph) directly on top, which can be unreadable; update the banner container
(the div that uses style={{ backgroundImage: `url(${category.image_url})` }}) to
be position: relative and add a full-size absolutely positioned overlay element
between the background and content that applies a semi-opaque dark gradient
(e.g., rgba(0,0,0,0.4) or a left-to-right gradient) to increase contrast, and
update the heading and description text styles (the h1 and the conditional p
rendering category.description) to use a light color (e.g., text-white or
similar) so the text remains readable over bright images.
In `@src/components/products/filters/ProductFilters.tsx`:
- Around line 139-141: The skeleton placeholder divs in ProductFilters.tsx use
the invalid Tailwind utility `w-18`; replace each occurrence of `w-18` in the
three divs (the two left placeholders and the one with `ml-auto`) with a valid
width such as `w-16` or `w-20` so the skeletons render correctly and are not
stripped at build time.
In `@src/components/search/SearchBar.tsx`:
- Line 191: Remove the trailing space in the className string on the div in the
SearchBar component: find the div with className "container mx-auto px-4 sm:px-6
lg:px-8 " and change it to "container mx-auto px-4 sm:px-6 lg:px-8" (no trailing
space) to keep className tidy.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 860fc24e-fb3f-49e2-bce6-5a99fd3f36db
📒 Files selected for processing (12)
src/app/[country]/[locale]/(storefront)/account/layout.tsxsrc/app/[country]/[locale]/(storefront)/c/[...permalink]/loading.tsxsrc/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsxsrc/app/[country]/[locale]/(storefront)/cart/page.tsxsrc/app/[country]/[locale]/(storefront)/page.tsxsrc/app/[country]/[locale]/(storefront)/products/ProductsContent.tsxsrc/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetails.tsxsrc/components/navigation/CategoryBanner.tsxsrc/components/products/filters/FilterDropdown.tsxsrc/components/products/filters/ProductFilters.tsxsrc/components/search/SearchBar.tsxsrc/components/ui/dropdown-menu.tsx
💤 Files with no reviewable changes (1)
- src/components/navigation/CategoryBanner.tsx
Comment on lines
+53
to
+71
| <div | ||
| className="flex flex-col justify-end min-h-[350px] bg-gray-50 bg-cover bg-center" | ||
| style={{ backgroundImage: `url(${category.image_url})` }} | ||
| > | ||
| <div className="container mx-auto px-4 sm:px-6 lg:px-8 "> | ||
| <Breadcrumbs category={category} basePath={basePath} /> | ||
|
|
||
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | ||
| <Breadcrumbs category={category} basePath={basePath} /> | ||
| <div className="mb-4"> | ||
| <h1 className="text-4xl font-bold text-gray-900"> | ||
| {category.name} | ||
| </h1> | ||
| </div> | ||
|
|
||
| <div className="mb-8"> | ||
| <h1 className="text-3xl font-bold text-gray-900">{category.name}</h1> | ||
| {/* Description */} | ||
| {category.description && ( | ||
| <p className="mb-4 text-gray-600">{category.description}</p> | ||
| )} | ||
| </div> | ||
| </div> |
Contributor
There was a problem hiding this comment.
Add a contrast overlay for banner text readability.
Line 54–55 place dark text over arbitrary category images. On bright images, heading/description can become unreadable (accessibility blocker).
Suggested fix
- <div
- className="flex flex-col justify-end min-h-[350px] bg-gray-50 bg-cover bg-center"
- style={{ backgroundImage: `url(${category.image_url})` }}
- >
- <div className="container mx-auto px-4 sm:px-6 lg:px-8 ">
+ <div
+ className="relative flex flex-col justify-end min-h-[350px] bg-gray-50 bg-cover bg-center"
+ style={
+ category.image_url
+ ? { backgroundImage: `url(${category.image_url})` }
+ : undefined
+ }
+ >
+ {category.image_url && (
+ <div className="absolute inset-0 bg-black/35" aria-hidden="true" />
+ )}
+ <div className="relative container mx-auto px-4 sm:px-6 lg:px-8">
<Breadcrumbs category={category} basePath={basePath} />
<div className="mb-4">
- <h1 className="text-4xl font-bold text-gray-900">
+ <h1 className="text-4xl font-bold text-white">
{category.name}
</h1>
</div>
{/* Description */}
{category.description && (
- <p className="mb-4 text-gray-600">{category.description}</p>
+ <p className="mb-4 text-white/90">{category.description}</p>
)}
</div>
</div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <div | |
| className="flex flex-col justify-end min-h-[350px] bg-gray-50 bg-cover bg-center" | |
| style={{ backgroundImage: `url(${category.image_url})` }} | |
| > | |
| <div className="container mx-auto px-4 sm:px-6 lg:px-8 "> | |
| <Breadcrumbs category={category} basePath={basePath} /> | |
| <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <Breadcrumbs category={category} basePath={basePath} /> | |
| <div className="mb-4"> | |
| <h1 className="text-4xl font-bold text-gray-900"> | |
| {category.name} | |
| </h1> | |
| </div> | |
| <div className="mb-8"> | |
| <h1 className="text-3xl font-bold text-gray-900">{category.name}</h1> | |
| {/* Description */} | |
| {category.description && ( | |
| <p className="mb-4 text-gray-600">{category.description}</p> | |
| )} | |
| </div> | |
| </div> | |
| <div | |
| className="relative flex flex-col justify-end min-h-[350px] bg-gray-50 bg-cover bg-center" | |
| style={ | |
| category.image_url | |
| ? { backgroundImage: `url(${category.image_url})` } | |
| : undefined | |
| } | |
| > | |
| {category.image_url && ( | |
| <div className="absolute inset-0 bg-black/35" aria-hidden="true" /> | |
| )} | |
| <div className="relative container mx-auto px-4 sm:px-6 lg:px-8"> | |
| <Breadcrumbs category={category} basePath={basePath} /> | |
| <div className="mb-4"> | |
| <h1 className="text-4xl font-bold text-white"> | |
| {category.name} | |
| </h1> | |
| </div> | |
| {/* Description */} | |
| {category.description && ( | |
| <p className="mb-4 text-white/90">{category.description}</p> | |
| )} | |
| </div> | |
| </div> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/`[country]/[locale]/(storefront)/c/[...permalink]/page.tsx around
lines 53 - 71, The banner currently uses category.image_url as a background and
renders dark text (the h1 in the div and the description paragraph) directly on
top, which can be unreadable; update the banner container (the div that uses
style={{ backgroundImage: `url(${category.image_url})` }}) to be position:
relative and add a full-size absolutely positioned overlay element between the
background and content that applies a semi-opaque dark gradient (e.g.,
rgba(0,0,0,0.4) or a left-to-right gradient) to increase contrast, and update
the heading and description text styles (the h1 and the conditional p rendering
category.description) to use a light color (e.g., text-white or similar) so the
text remains readable over bright images.
This was referenced Apr 9, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit