Fix accordion animation

[uldisrudzitis]

Show elements outside accordion container - long dropdown case with absolute position

Summary by CodeRabbit

• Style
  • Implemented smooth fade-in and fade-out animations for the aside panel component, providing polished visual transitions when elements appear and disappear.
  • Enhanced visibility for expanded sections by ensuring all content displays completely without clipping, improving the user experience when panels are expanded.

[coderabbitai]

Walkthrough

Modified editor/src/styles/_aside.scss to add CSS transitions for the aside panel. Child divs now start hidden with opacity 0 and fade in/out over 0.25 seconds. The is-expanded state ensures full visibility and prevents overflow clipping.

Changes

Cohort / File(s)	Change Summary
Aside panel styling editor/src/styles/_aside.scss	Added opacity transition (0 to 1 over 0.25s ease) to aside > div elements; updated .settings is-expanded state to apply overflow: visible and opacity: 1 to child divs for smooth fade-in/out effects

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Single file modification with isolated CSS changes
• Straightforward opacity and overflow property updates
• No logic modifications or behavioral complexity

Possibly related PRs

• Replace Angular animations with browser native animation #600: Also modifies editor/src/styles/_aside.scss, replacing Angular animations with CSS transitions for aside settings expansion (opacity/grid-based).

Poem

🐰 A whisper of fade, a gentle embrace,
The aside slides in with opacity's grace,
Transitions smooth, a quarter-second dance,
When expanded it blooms—no overflow glance! ✨

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title 'Fix accordion animation' is directly related to the main change in the changeset. The PR description clarifies that this fixes accordion animation behavior for elements positioned outside the accordion container, and the code changes add opacity transitions and styling adjustments to achieve this animation fix. The title accurately summarizes the primary purpose of the changes.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-accordion-animation

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 943afb8 and 1232ec2.

📒 Files selected for processing (1)

• editor/src/styles/_aside.scss (2 hunks)

🔇 Additional comments (1)

editor/src/styles/_aside.scss (1)

179-186: Accordion animation implementation looks solid.

The synchronized opacity and grid-template-rows transitions provide a smooth fade-in/out effect that's well-coordinated with the height expansion/collapse. The initial opacity: 0 and transition: opacity 0.25s ease create a clean visual effect, and switching to overflow: visible when expanded properly addresses the PR goal of displaying absolutely positioned elements (like dropdowns) that overflow the accordion container.

To ensure the animation works as intended, please verify the following:

• Test the accordion open/close animation in at least one browser to confirm the fade effect is smooth and visually aligned with the height transition.
• Test that absolutely positioned child elements (dropdowns, popovers) render correctly outside the container when the accordion is expanded.
• Verify that the overflow behavior doesn't inadvertently affect other layout aspects during animation.

---

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.}