fix: rounded corner shadow bug #4253
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@CORCTON is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe pull request introduces updates to the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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
Documentation and Community
|
![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/docs/components/marketing/custom-themes/styles.ts (1)
90-90: Consider standardizing border radius valuesWhile the shadow fix addresses the visual bug, there's an inconsistency in border radius values:
- imageWrapper uses
rounded-3xl- img uses
rounded-lg- wrapper uses
rounded-3xlThis might cause subtle visual artifacts in some browsers where the shadows and rounded corners don't align perfectly.
Consider standardizing the border radius:
- "shadow-lg rounded-3xl", + "shadow-lg rounded-3xl overflow-hidden",Also update the img class to match:
- "rounded-lg", + "rounded-3xl",
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
apps/docs/components/marketing/custom-themes/styles.ts(1 hunks)
🔇 Additional comments (1)
apps/docs/components/marketing/custom-themes/styles.ts (1)
89-91: Verify shadow rendering across browsers and backgrounds
The shadow implementation varies between themes:
- modern: uses
shadow-lg - elegant: uses
shadow-xl - retro: uses
before:shadow-md
Let's verify the shadow rendering consistency.
✅ Verification successful
Shadow implementation is consistent across themes and browsers
The codebase analysis shows:
- All shadow implementations use Tailwind CSS classes (
shadow-*) which are consistently implemented across browsers - The theme variations (
shadow-lg,shadow-xl,before:shadow-md) are part of a well-structured design system defined inpackages/core/theme/src/ - No browser-specific shadow implementations were found
- Shadow styles are properly scoped with appropriate color variants and opacity values
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for all shadow-related implementations to ensure consistency
rg -n "shadow-[a-zA-Z]+" --type ts
# Search for potential browser-specific shadow implementations
rg -n "@(webkit|moz|ms).+shadow" --type ts
Length of output: 24298
Closes #
📝 Description
This PR fixes the issue with the incorrect display of rounded corner shadows on the official website. The shadow was not being rendered correctly in certain browsers, and this update addresses that problem.
⛳️ Current behavior (updates)
The rounded corner shadows on the website are displayed incorrectly in some browsers. This visual issue impacts the overall design and user experience.
🚀 New behavior
After this fix, the rounded corner shadows are displayed correctly across all supported browsers. The visual appearance of the website is now consistent with the intended design.
💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
This fix primarily affects the visual rendering of the rounded corner shadows on the website. No major changes to functionality or behavior were introduced.