I'm noticing that SimpleDropdown doesn't seem to be scrollable. I wonder if this may be an issue for poetry levels with long poem lists on mobile devices.
I see that for Dance (legacy) levels, the SongSelector is scrollable on mobile (checked on my phone!)
I see that they both use native <select> so it seems like there's some styling that's determining this in SimpleDropdown? I wonder if this is intended for SimpleDropdown or not. @moshebaricdo do you have context here?

From what I'm seeing both use native select as the base, but the legacy implementation is a react select component with bootstrap inspired custom styling for the button trigger and dropdown menu. SimpleDropdown in DSCO uses a fully native approach for the dropdown menu and only applies custom styles to the select element itself (the button trigger).

When we were deciding whether to use a custom dropdown menu styling or go fully native, we opted to go fully native as that is best practice for the most reliable/accessible approach and most flexible as users in any environment will see their OS/browser's native menu—even though it's not as pretty. This is actually better for mobile, as they would see the iOS or android menu when opening the dropdown vs a custom styling.

Thanks Moshe! So my concern was that for a dropdown with many options, a user could still scroll through entire list on a smaller mobile device. Can you confirm that a user can scroll in SimpleDropdown?

Yep! On an iPad, for example, they'd see iOS's native dropdown which has its own optimizations/styling in place for menus with lots of options vs just a few. That was the primary driver for taking this approach for simple dropdown. I made a super quick codepen experiment to show what this would look like on iOS.

The reason I asked is that locally when I checked out Hannah's branch, when I selected the iPhone view, I saw this dropdown which wasn't scrollable.

However, I found a place where SimpleDropdown is used with a long list - StudentSelector is a student dropdown on teacher dashboard unit page! I logged in on my iPhone, and viewed the list from a section with >30 students and list is scrollable. 🎉

Yep! On an iPad, for example, they'd see iOS's native dropdown which has its own optimizations/styling in place for menus with lots of options vs just a few.

Thanks! I posted my reply above before seeing your latest response. Appreciate the explanation and the check!

Of c! My delay was also trying to find a good example I could screenshot on my phone 😄

Thank you both for the learnings! I agree Alice that I usually test mobile by 'hacking' a mobile view in the browser (which in this case, doesn't quite work)

Yep! On an iPad, for example, they'd see iOS's native dropdown which has its own optimizations/styling in place for menus with lots of options vs just a few. That was the primary driver for taking this approach for simple dropdown. I made a super quick codepen experiment to show what this would look like on iOS.