fix: accordion content overflows below card border in All Components …

[Abhijadhav03]

Description

Fixed a layout issue where accordion content would overflow and spill below the card border when expanded on the all-components demo page, breaking the visual container integrity.

Problem Statement

When users expanded accordion items on the all-components page, the expanded content would overflow beyond the card's bottom border instead of being properly contained. This created a broken visual experience where content appeared to "break through" the card boundary.

Solution

Modified the card layout in /apps/website/components/page-components/all-components/index.tsx:

Changes made:

• Removed fixed height constraint (h-[300px])
• Changed overflow from hidden to auto for scrollable overflow
• Added min-h-[300px] to maintain minimum card height
• Added flex-col for proper vertical stacking
• Added p-4 padding for better content spacing
• Added rounded-b-lg for visual polish

Testing

1. Navigate to /ui/docs/components/all-components
2. Expand accordion items and verify:
   • Content expands without overflow
   • Card grows to accommodate content
   • Label remains at bottom
3. Test with other expandable components
4. Verify across breakpoints and dark mode

Related Issues

Fixed #3382

[vercel]

@Abhijadhav03 is attempting to deploy a commit to the GeekyAnts Labs Team on Vercel.

A member of the Team first needs to authorize it.

[Abhijadhav03]

Hey @Sanchitv3 ! let me know if you’d like any changes on this PR. I’m happy to make updates if needed.

[Sanchitv3]

Hey @Abhijadhav03, thanks for the fix and the detailed explanation 🙌

The current behavior on the website is actually intentional. The cards are designed with a fixed height (h-[300px]) and overflow-hidden along with slight scaling to maintain a consistent visual layout across all components.

If we allow the card to grow dynamically based on accordion content, it can lead to inconsistent card sizes on the “All Components” page, which affects the overall grid alignment and showcase aesthetics.

So in this case, the overflow is expected behavior as part of the design trade-off. We might explore a better pattern later (like internal scroll or a different preview strategy), but for now we’d prefer to keep the fixed-height approach.

Appreciate the contribution, feel free to take up another issue! 🚀

[Abhijadhav03]

Hey @Sanchitv3 👋

I made a cleaner fix that keeps the fixed card height while solving the overflow issue — no dynamic growth, no scroll, and grid alignment stays intact only thing i did was reduce the text size !.

Here's the updated look:

gluestack.mp4

Let me know what you think! Happy to update the PR if this works better.

Thanks!

[Sanchitv3]

Hey @Abhijadhav03 ,
This looks great, thanks for sharing the approach!
Could you share your PR so I can review it in detail?

[Abhijadhav03]

Hey @Sanchitv3,

Thanks for the feedback!

I've updated the PR with a cleaner fix that keeps the fixed card height:

• Slightly shortened the accordion content text
• Added max-h and smaller text size so it fits properly inside the card

PR Link: #3383

Let me know what you think!
Thanks 🙌