Fix truncated focus

[michaltarasiuk]

I removed the overflow-hidden class from the AnimatedSizeContainer component. After reviewing its usage, I did not find any display issues.

Before:

After:

[vercel]

@michaltarasiuk is attempting to deploy a commit to the Dub Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[steven-tey]

Sorry I don't see the issue here – what's wrong with the current input otp implementation?

[michaltarasiuk]

The issue with the current implementation is that the focus indicator is partially truncated when the user interacts with the OTP input field. This happens because the overflow-hidden class in the AnimatedSizeContainer prevents elements that extend beyond the container’s boundaries from being fully visible.

By removing the overflow-hidden class, the focus indicator is now fully visible, which resolves this problem.

@steven-tey Let me know if this clarifies the issue!

[TWilson023]

I don't think we'll be able to remove overflow-hidden from AnimatedSizeContainer, because we don't want content to overflow while the container is still expanding.

Here's what happens when we remove the overflow-hidden (slowed down to help demonstrate):

CleanShot.2025-01-06.at.16.51.22.mp4

Instead, we may just need to play around with paddings/margins to get this focus ring to fit within the overflow-hidden container.