Mobile UI Bug: Overlapping Color Selector and Progress Bar Buttons

[harshbhonsle]

Problem / Motivation

On mobile devices, the Color Selector and Progress Bar buttons on https://devui-mu.vercel.app/ are overlapping, making it difficult for users to interact with them. This negatively affects usability and accessibility on smaller screens.

Proposed Solution

• Stack the two buttons vertically on mobile viewports:
• Place the Color Selector button on top.
• Position the Progress Bar button below it.
• Apply appropriate spacing (e.g., margin or padding) between them to ensure clear separation and touch-friendly layout.

This approach maintains both functionalities while improving the mobile user experience.

Alternatives considered

---

Acceptance Criteria

On mobile screens (e.g., ≤ 480px width), the Color Selector and Progress Bar buttons are stacked vertically.

• The Color Selector appears above the Progress Bar.
• There is sufficient spacing between the buttons to prevent overlap.
• Both buttons remain fully functional and visually accessible.

I'd like to work on this issue as part of Hacktoberfest. Kindly assign it to me.

[github-actions]

Welcome, @harshbhonsle! Thanks for raising the issue.
Soon the maintainers/owner will review it and provide you with feedback/suggestions.
Make sure to star this awesome repository and follow the account!

• DevUI