static/Modal.jsx refactor: migrate from Bootstrap to native dialog element adapt to mB redesign

[hom3mad3]

Replace Bootstrap modals with native HTML element and update styles for the mB redesign.

This change simplifies our modal implementation while improving the mobile experience. The element provides better accessibility and native support for modal behaviors.

styles: mB aplus

Screen.Recording.2025-01-21.at.19.46.40.mov

mobile-sheet.mov

TODO:

• a-plus dependency

[hom3mad3]

@CarolingerSeilchenspringer @mcastro-lqd Would it be alright to keep the mobile design as suggested above? The full width and radius give it a more native feel, which could create a smoother experience.

[CarolingerSeilchenspringer]

@mcastro-lqd can you have a look?

[vellip]

Very good work, looks nice. It was interesting to see the dialog element being used. Haven't done that before. I left a some questions for you, but it looks good already.

[hom3mad3]

Very good work, looks nice. It was interesting to see the dialog element being used. Haven't done that before. I left a some questions for you, but it looks good already.

dialog <3! it simplifies life a lot since its basically two methods open and close

my biggest issue so far, was that at some point i tested the finger swiper for mobile and that was basically adding half the existing lines of code just for that, so i decided to keep simple (also explains some leftover styles in the other branch hehe). it's a great little native component, but if you need fancy stuff then you gotta write a lot more.

i'm super happy not to have to write custom keyboard and accessibility extensions anymore though 😮‍💨

[hom3mad3]

@CarolingerSeilchenspringer @mcastro-lqd @vellip oh, i'll also see if i can already quickly change the current copy button to use the new "toggle" button. if not, i'll create an issue for after release.

[vellip]

LGTM, just the useId thing