(ui/docs/components/all-components): Accordion content overflows / goes below the card border when expanded

[Abhijadhav03]

Bug Report

Title:
Accordion content overflows below card border when expanded

Description

When expanding an Accordion item in the "All Components" demo page, the content overflows and goes below the bottom border of the card instead of pushing the card height properly.

Steps to Reproduce

1. Go to the All Components page (/components or similar)
2. Scroll to the Accordion component demo
3. Click on either:
   • "How do I place an order?"
   • "What payment methods do you accept?"

Expected Behavior

The accordion content should expand smoothly inside the card, and the card should grow in height to fully contain the expanded content without any overflow.

Actual Behavior

The expanded content spills out below the card's border, breaking the visual container.

Screenshots

Before (collapsed):
![Accordion collapsed](

)

After (expanded - bug):
![Accordion expanded with overflow](

)

Environment

• Project: gluestack-ui v3
• Browser: Chrome
• OS: Windows
• Component: Accordion

Additional Context

This appears to be a layout/overflow issue, likely related to:

• Missing overflow: hidden or proper height transition handling
• Flex/grid layout constraints on the parent card
• Height animation not accounting for content size correctly

Would be happy to work on a fix for this if no one is already assigned.

---

Thanks!

[Abhijadhav03]

Hey! @Sanchitv3 ! I'd like to work on this and submit a PR. Can this be assigned to me?

[Sanchitv3]

Hey! @Sanchitv3 ! I'd like to work on this and submit a PR. Can this be assigned to me?

Hi @Abhijadhav03 , Sure! This is an open-source project, PRs are welcome 🙌