Adjust flag list layout to prevent content overflow

[Sanjay-Sahu-Bandla]

Problem:

When selecting numerous flags, the content in both the left-hand flags container and the right-hand flags selection dropdown overflows beyond the viewport, exceeding 100vh and 100vw respectively. This creates a cluttered and visually disruptive user experience.

Solution:

This pull request implements a fix for the content overflow issue by applying max-height and overflow properties to both left-hand, right-hand sections. This effectively prevents content from spilling outside the designated areas, ensuring a clean and functional interface regardless of the number of selected flags.

Visual Improvements:

Before and after screenshots are provided for clear comparison:

• Before: (Attached screenshot showcasing the overflow issue)

• After: (Attached screenshot showcasing the resolved overflow)

These changes improve the user experience by preventing content overflow and maintaining a consistent layout, even when numerous flags are selected.

Technical Details:

• The fix is implemented using CSS and doesn't affect the existing functionality of the flag selection process.
• Thorough testing on various screen sizes and browsers ensures consistent behavior across platforms.

Call to Action:

Your feedback on this pull request is valuable. I'm open to suggestions for further improvements and optimization.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
letra-extension	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 15, 2023 4:59pm

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @jayehernandez on Vercel.

@jayehernandez first needs to authorize it.

[github-actions]

Hi there! This repository is currently not accepting new PRs. For more info, please check out our README. If you have any questions, please feel free to contact us.