fix: remove transition for breakpoint lg

[batchu5]

fixed demo transition for larger screens.

fixes #4934

Summary by CodeRabbit

• Bug Fixes
  • Fixed control visibility behavior in the demo animation component on larger screens.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	cae39e6
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/69646dcf0e556900085c62c6
😎 Deploy Preview	https://deploy-preview-4935--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

📝 Walkthrough

Walkthrough

A single-line modification to DemoAnimation.tsx removes responsive Tailwind breakpoint overrides (lg:h-auto, lg:-translate-x-3/4, lg:opacity-100) from the show-controls reveal logic, ensuring the MacWindow component moves consistently across all viewport sizes.

Changes

Cohort / File(s)	Summary
Demo Animation Fix components/DemoAnimation.tsx	Removed large-screen responsive breakpoint overrides from show-controls className; maintains uniform h-0, -translate-x-full, and opacity-0 state across all viewport sizes

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A hop, a skip, a tiny tweak,
No more breakpoints break the streak,
The window slides with graceful ease,
Now large screens dance, and developers please! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: removing the lg breakpoint transition logic from the DemoAnimation component to fix the animation behavior.
Linked Issues check	✅ Passed	The code change directly addresses issue #4934 by removing the lg-specific transforms that were causing the animation to break at the lg breakpoint.
Out of Scope Changes check	✅ Passed	All changes are focused solely on fixing the animation issue in DemoAnimation.tsx; no unrelated modifications are present.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ce10a15 and cae39e6.

📒 Files selected for processing (1)

• components/DemoAnimation.tsx

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-12-29T14:21:28.216Z

Learnt from: sammy200-ui
Repo: asyncapi/website PR: 4804
File: components/navigation/Filter.tsx:32-41
Timestamp: 2025-12-29T14:21:28.216Z
Learning: In the asyncapi/website repository, when you intentionally omit dependencies in React hooks (e.g., useEffect, useMemo), add an eslint-disable comment with an explanatory note above the line to justify the design choice. For example: // eslint-disable-next-line react-hooks/exhaustive-deps: intentionally omitting dependencies to avoid unnecessary re-runs. This helps reviewers understand the rationale and keeps lint guidance informative.

Applied to files:

• components/DemoAnimation.tsx

⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: Redirect rules - asyncapi-website
• GitHub Check: Header rules - asyncapi-website
• GitHub Check: Pages changed - asyncapi-website
• GitHub Check: cypress-run
• GitHub Check: Test NodeJS PR - windows-latest
• GitHub Check: Lighthouse CI

🔇 Additional comments (1)

components/DemoAnimation.tsx (1)

312-313: LGTM! Correct fix for the lg breakpoint animation issue.

The removal of lg:h-auto lg:-translate-x-3/4 lg:opacity-100 ensures the MacWindow translates fully left (-translate-x-full) on all screen sizes instead of only 75% (-translate-x-3/4) on large viewports. This correctly addresses the reported bug where extra width remained after the transition at the lg breakpoint.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (ce10a15) to head (cae39e6).

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #4935   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          796       796           
  Branches       146       146           
=========================================
  Hits           796       796           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	38
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-4935--asyncapi-website.netlify.app/