Adding accordion for dropdown children

[gkovats]

Attempt to address the sub groups in dropdowns. Things to call out

• I used BEM style class names, maybe a departure from previous standard. Let me know if you want this changed / we're trying to keep class names to a minimum
• made the whole dropdown limit to 80% vertical heigh and scrollable, since dropdowns taller than the screen are kinda awful
• added mild animation for expand / collapse

[netlify[bot]]

✅ Deploy Preview for tsml-ui ready!

Name	Link
🔨 Latest commit	739c0313fba6e602b353e12917be6f0aa70036b8
🔍 Latest deploy log	https://app.netlify.com/sites/tsml-ui/deploys/673a6414dd233900081b75af
😎 Deploy Preview	https://deploy-preview-430--tsml-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[joshreisner]

definitely seems like a good start, thanks! works well with many levels of nesting: https://deploy-preview-430--tsml-ui.netlify.app/tests/timezones.html?region=usa-new-york-manhattan-greenwich-village

noticed a few places where it seems like it could use some design polish:

• when a nested row is selected, the highlight does not go edge-to-edge

• looks like it's no longer shading on hover

• the other menus now have a lot of white space (before vs after), might be nice to try to keep the numbers flush right (as far as they'll go?) also maybe we need an internal border between items?

  

also some like very minor and subjective CSS notes - i'm happy to tweak some

• feel like the triangles should be bigger, and animate when clicked, and respond somehow on hover, maybe by getting darker?

• the triangle gets lost in dark mode

  

• also not sure why "San Jose" is wrapping in that case, i wonder if we could make the dropdowns go 100% wide when on mobile?