The "new attribute" modal for editing a person is too small

[gustavi]

Description

The "new attribute" modal for editing a person is too small and hard to use. The select do not display more than 2 full options.

How to reproduce

• Go to a person profile (/person/I[N])
• Edit (bottom right)
• Attributes tab
• "+" button

Proposed fixes

1. Making the modal taller
2. Allow the select to go beyond the modal

Additional information

• Firefox 115
• 1920x1080
• Gramps Web Frontend 24.7.0

[DavidMStraub]

Right. But no need to enlarge the modal, just need to set fixedMenuPosition on the mwc-select.

[DavidMStraub]

Turns out this can't be fixed easily with MWC, see https://github.com/material-components/material-web/issues/832.

The solution is to migrate to md-filled-select which has a menuPositioning attribute, see https://material-web.dev/components/select/. But is more work.

[DavidMStraub]

Also true for place types:

https://github.com/gramps-project/gramps-web/issues/481#issuecomment-2277871730

[m-breitbach]

I observed that, if the dropdown menu opens downwards and is truncated, the whole modal can be scrolled down (this makes it usable at least, even if not super conveniently). In cases where it openes upwards and is truncated (like in place types), no such scrolling becomes availabe.

[m-breitbach]

Is this in progress already? If not, I might give it a try.

[DavidMStraub]

Not in progress, would be great if you could tackle it. The solution is to migrate from mwc-dialog and mwc-select to md-dialog and md-filled-select, there is no point in investing work into workarounds for the mwc- elements as we need to get rid of them anyway.

Step 1: replace mwc-dialog in GrampsjsObjectForm.js by md-dialog. md-dialog is already used in some other places in the code base, you can look at those.

Step 2: replace mwc-select in GrampsjsFormSelectType.js by md-filled-select. Also md-filled-select is already used in two places.

Note: I am not actually sure if the migration fixes the problem by itself, but if it doesn't, we should find a fix/workaround for the new elements rather than the unmaintained ones.

[m-breitbach]

Already experimented with workarounds for mwc-, but I failed miserably due to uncontrollable side effects. So your approach definitely makes sense.

[m-breitbach]

Please have a look at my PR and comments (#662). I am not really experienced in front end, so sorry if things don't make sense.

[DavidMStraub]

Fixed by #662!