Current Behavior

The current instrument selector in Music Blocks uses a radial layout implemented with Wheelnav.js. While it’s visually distinctive, it introduces several UX issues:

• Many instrument names are displayed upside down or at angles that are hard to read.
• The radial layout is hard to use on mobile, with instruments overlapping and difficult to tap.
• The wheel feels cluttered with many instruments and is hard to customize; a grid layout is cleaner and easier to maintain.

Screenshot (current wheel layout):

Desired Situation

Redesign the instrument selector as a grid-based layout, with instrument buttons placed around the border of a rectangle and a close button in the center. This new layout improves:

• Readability
• Better mobile responsiveness
• Customizability and ease of future enhancements

Screenshot (proposed grid layout):

Checklist

• [✅] I have read and followed the project's code of conduct.
• [✅] I have searched for similar issues before creating this one.
• [✅] I have provided all the necessary information to understand and reproduce the issue.
• [✅] I am willing to contribute to the resolution of this issue.

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See contributing instructions.
🙋🏾🙋🏼 Questions: Community Matrix Server.