fixes: Fix Button Text Overflow on Product Cards #2377 #2378
Conversation
|
@sagarbendale2004 is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes in this pull request focus on the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Poem
📜 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 (
|
![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 (3)
src/User/components/Popular_Categories/ProductGrid.jsx (3)
Line range hint
118-126: Consider improving button text visibility without reducing font size.While the changes address the overflow issue, reducing the text size to
text-xsmight impact readability. Instead, consider:
- Using responsive classes for better adaptability
- Maintaining the original
text-smsize but adjusting the layout- className="mt-1 bg-[#166635ff] text-white px-8 py-1 rounded-lg text-xs w-full hover:bg-[#3d9970ff] transition-colors disabled:opacity-45 disabled:pointer-events-none" + className="mt-1 bg-[#166635ff] text-white px-4 py-2 rounded-lg text-sm w-full hover:bg-[#3d9970ff] transition-colors disabled:opacity-45 disabled:pointer-events-none sm:text-xs sm:px-3 sm:py-1"
Line range hint
132-137: Simplify the Buy Now button text condition.The ternary condition returns the same text in both cases, making it unnecessary.
- {cartItems.find((item) => item.id === product.id) - ? "⚡Buy Now" - : "⚡Buy Now"} + ⚡Buy Now
Line range hint
117-138: Consider a more responsive button layout for smaller screens.The current implementation with two full-width buttons might cause layout issues on very small screens. Consider a more responsive approach:
- Stack buttons vertically on very small screens
- Use responsive classes to adjust the layout based on screen size
- <div className="flex h-10 gap-2"> + <div className="flex flex-col sm:flex-row h-auto sm:h-10 gap-2">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- src/User/components/Popular_Categories/ProductGrid.jsx (2 hunks)
🔇 Additional comments (1)
src/User/components/Popular_Categories/ProductGrid.jsx (1)
118-118: Verify button text visibility across different languages.Since this is an e-commerce site, ensure the button text remains visible if translated to languages with longer words.
Also applies to: 132-132
✅ Verification successful
Button text is safe for internationalization
The button text is very concise ("Added", "Add to Cart", and "⚡Buy Now") and the container has a flexible width (
w-full). The text-size is also appropriately small (text-xs). These factors combined with the padding (px-8 py-1) provide enough space to accommodate longer translations without visibility issues.Additionally, there's no internationalization setup in the project currently (no i18n packages in package.json), so this is a forward-looking consideration for when translations are added in the future.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for any translation files or language configurations rg -g '!node_modules' -g '*.{json,js,jsx,ts,tsx}' -i 'translation|i18n|language'Length of output: 82
Script:
#!/bin/bash # Let's check for any text content in the button or surrounding component ast-grep --pattern 'button|Button' -l jsx,tsx # Also check for any internationalization setup or language-related imports rg -g '!node_modules' -g '*.{json,js,jsx,ts,tsx}' -i 'intl|locale|lang' # Look for the specific component to understand the button's context fd -e jsx -e tsx "ProductGrid"Length of output: 1571
Script:
#!/bin/bash # Let's examine the ProductGrid component to see the button's content and context cat src/User/components/Popular_Categories/ProductGrid.jsx # Check if there's any internationalization setup in package.json cat package.jsonLength of output: 7291
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@codervivek5 if my changes is accurate then please merge my PR as soon as possible. |
|
fix this ..build are failed [13:38:24.791] Running build in Washington, D.C., USA (East) – iad1 |
|
@codervivek5 i fixes the error in app.jsx file can you try to merge it again please.. |
|
@codervivek5 as I check there is no error or conflict in Branch so can you please merge my PR |
fixes #2377
Description:
This pull request addresses the issue of button text overflow on the product cards located at https://www.vigybag.com/popularCategories/fashionAccessories. The "Add to Cart" and "Buy Now" buttons were previously truncating text, making it difficult for users to see the full button labels.
Changes proposed:
Screenshots:
Testing:
Verified that both buttons now display their full text on various screen sizes.
Ensured that the buttons are responsive and maintain usability across devices.
Summary by CodeRabbit
Style
Bug Fixes
Chores