UM Messages Not Displaying Correctly on Mobile

[nowmichaelclark]

Describe the bug Ultimate Member messages cut off on the display for cellphones.

To Reproduce Steps to reproduce the behavior:

1. Go to 'messages from the community menu' using a mobile device
2. See that messages are cut off.

Expected behavior Messages and the text box for sending them should be clearly displayed.

Testing I created a completely blank page with just the short code [ultimatemember_messages] and it still has a similar bug. The way messages are displayed here is a bit different though. Check it out: https://opensanghafoundation.org/newsite/messageum_mikey/

Smartphone:

• Device: Moto G Power
• OS: Android 12
• Browser: Chrome

Additional context um-messaging.zip Here is an attachment with the um messaging plugin. I've Identified a few files that may be the culprit but I'm not sure:

um-messaging/assets/js/um-messaging.js

um-messaging/assets/js/um-messaging.min.js

um-messaging/assets/css/um-messaging.css

um-messaging/assets/css/um-messaging.min.css

[nowmichaelclark]

I used an html shortcode to insert some css:

Check it out: https://opensanghafoundation.org/newsite/messageum_mikey/

[coiby]

I find my local instance doesn't have this problem,

One difference I notice is um-popup style from um-responsive.css takes precedence than the one from um-modal.css wheres for the problematic page it's the contrary,

I checked the source. For the normal page, um-modal.css is loaded first

<link rel='stylesheet' id='um_modal-css' href='[http://localhost:8780/wp-content/plugins/ultimate-member/assets/css/um-modal.css](view-source:http://localhost:8780/wp-content/plugins/ultimate-member/assets/css/um-modal.css)' type='text/css' media='all' />
<link rel='stylesheet' id='um_ui-css' href='[http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/jquery-ui/jquery-ui.css](view-source:http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/jquery-ui/jquery-ui.css)' type='text/css' media='all' />
<link rel='stylesheet' id='um_tipsy-css' href='[http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/tipsy/tipsy.css](view-source:http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/tipsy/tipsy.css)' type='text/css' media='all' />
<link rel='stylesheet' id='um_raty-css' href='[http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/raty/um-raty.css](view-source:http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/raty/um-raty.css)' type='text/css' media='all' />
<link rel='stylesheet' id='um_fonticons_ii-css' href='[http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/legacy/fonticons/fonticons-ii.css](view-source:http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/legacy/fonticons/fonticons-ii.css)' type='text/css' media='all' />
<link rel='stylesheet' id='um_fonticons_fa-css' href='[http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/legacy/fonticons/fonticons-fa.css](view-source:http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/legacy/fonticons/fonticons-fa.css)' type='text/css' media='all' />
<link rel='stylesheet' id='select2-css' href='[http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/select2/select2.css](view-source:http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/select2/select2.css)' type='text/css' media='all' />
<link rel='stylesheet' id='um_fileupload-css' href='[http://localhost:8780/wp-content/plugins/ultimate-member/assets/css/um-fileupload.css](view-source:http://localhost:8780/wp-content/plugins/ultimate-member/assets/css/um-fileupload.css)' type='text/css' media='all' />
<link rel='stylesheet' id='um_datetime-css' href='[http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/pickadate/default.css](view-source:http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/pickadate/default.css)' type='text/css' media='all' />
<link rel='stylesheet' id='um_datetime_date-css' href='[http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/pickadate/default.date.css](view-source:http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/pickadate/default.date.css)' type='text/css' media='all' />
<link rel='stylesheet' id='um_datetime_time-css' href='[http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/pickadate/default.time.css](view-source:http://localhost:8780/wp-content/plugins/ultimate-member/assets/libs/pickadate/default.time.css)' type='text/css' media='all' />
<link rel='stylesheet' id='um_common-css' href='[http://localhost:8780/wp-content/plugins/ultimate-member/assets/css/common.css](view-source:http://localhost:8780/wp-content/plugins/ultimate-member/assets/css/common.css)' type='text/css' media='all' />
<link rel='stylesheet' id='um_responsive-css' href='[http://localhost:8780/wp-content/plugins/ultimate-member/assets/css/um-responsive.css](view-source:http://localhost:8780/wp-content/plugins/ultimate-member/assets/css/um-responsive.css)' type='text/css' media='all' />

But for the buggy page, um-responsive.css is loaded first

<link rel="stylesheet" id="um_responsive-css" href="https://opensanghafoundation.org/newsite/wp-content/plugins/ultimate-member/assets/css/um-responsive.css" type="text/css" media="all" />
<link rel="stylesheet" id="um_modal-css" href="https://opensanghafoundation.org/newsite/wp-content/plugins/ultimate-member/assets/css/um-modal.css" type="text/css" media="all" />