feat: hide mobile warning box on all screen sizes #2757
Conversation
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
- Changed className from 'sm:hidden' to 'hidden' in Hero component - This hides the mobile warning box on mobile devices as requested - Maintains existing behavior on larger screens (already hidden) - Warning text: 'Onlook isn't designed for Mobile – Please open on a larger screen' Co-Authored-By: [email protected] <[email protected]>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the ✨ Finishing Touches🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| @@ -84,7 +84,7 @@ export function Hero() { | |||
| </motion.div> | |||
|
|
|||
| </div> | |||
| <motion.div className="sm:hidden text-balance flex flex-col gap-4 items-center relative z-20 mx-10 text-foreground-secondary bg-foreground-secondary/10 backdrop-blur-lg rounded-lg border-[0.5px] border-foreground-secondary/20 p-4" | |||
| <motion.div className="hidden text-balance flex flex-col gap-4 items-center relative z-20 mx-10 text-foreground-secondary bg-foreground-secondary/10 backdrop-blur-lg rounded-lg border-[0.5px] border-foreground-secondary/20 p-4" | |||
There was a problem hiding this comment.
The Tailwind classes hidden and flex conflict with each other as they set contradictory display properties (display: none vs display: flex). Since the goal is to completely hide this element on all screen sizes, the flex class should be removed from the className string to ensure the element is properly hidden.
| <motion.div className="hidden text-balance flex flex-col gap-4 items-center relative z-20 mx-10 text-foreground-secondary bg-foreground-secondary/10 backdrop-blur-lg rounded-lg border-[0.5px] border-foreground-secondary/20 p-4" | |
| <motion.div className="hidden text-balance flex-col gap-4 items-center relative z-20 mx-10 text-foreground-secondary bg-foreground-secondary/10 backdrop-blur-lg rounded-lg border-[0.5px] border-foreground-secondary/20 p-4" |
Spotted by Diamond
Is this helpful? React 👍 or 👎 to let us know.
- Removed 'flex' class that conflicts with 'hidden' class - Addresses Diamond AI code review feedback about CSS display conflicts - Ensures mobile warning box is properly hidden on all screen sizes Co-Authored-By: [email protected] <[email protected]>
Description
Hide the mobile warning box "Onlook isn't designed for Mobile – Please open on a larger screen" on mobile devices as requested in Slack.
Change: Modified the Tailwind CSS class from
sm:hiddentohiddenin the Hero component.Behavior:
This achieves the goal of hiding the warning on mobile while maintaining the existing behavior on larger screens (where it was already hidden).
Related Issues
Request from @[email protected] in Slack #devin-requests
Type of Change
Testing
Recommended testing steps:
Screenshots (if applicable)
Screenshots not available due to local testing limitations.
Additional Notes
sm:hidden→hiddenLink to Devin run: https://app.devin.ai/sessions/913e436b7993476a8af9d88574add777
Requested by: @itsNintu
Important
Hide mobile warning box on all screen sizes in
Herocomponent by changing CSS class fromsm:hiddentohidden.Herocomponent to hide the mobile warning box on all screen sizes by changing Tailwind CSS class fromsm:hiddentohidden.This description was created by
for bc0d3f0. You can customize this summary. It will automatically update as commits are pushed.