Allow contact's profile modal to be shown...

even if there is now OMEMO device info

src/modals/templates/profile.js

@@ -58,7 +58,7 @@ const device_list = (o) => {
                     ${i18n_other_devices}
                 </label>
             </li>
-            ${ o.view.other_devices.map(device => device_item(Object.assign({device}, o))) }
+            ${ o.view.other_devices?.map(device => device_item(Object.assign({device}, o))) }
         </ul>
         <div class="form-group"><button type="submit" class="save-form btn btn-primary">${i18n_remove_devices}</button></div>
     `;
@@ -81,7 +81,7 @@ const omemo_page = (o) => {
                 <div class="form-group">
                     <button type="button" class="generate-bundle btn btn-danger">${i18n_generate}</button>
                 </div>
-                ${ o.view.other_devices.length ? device_list(o) : '' }
+                ${ o.view.other_devices?.length ? device_list(o) : '' }
             </form>
         </div>`;
 }
@@ -100,16 +100,15 @@ export default (o) => {
     const i18n_omemo = __('OMEMO');
     const i18n_profile = __('Profile');
 
-    const navigation =  html`
-        <ul class="nav nav-pills justify-content-center">
+    const navigation = o.view.current_device ?
+        html`<ul class="nav nav-pills justify-content-center">
             <li role="presentation" class="nav-item">
                 <a class="nav-link active" id="profile-tab" href="#profile-tabpanel" aria-controls="profile-tabpanel" role="tab" data-toggle="tab">${i18n_profile}</a>
             </li>
             <li role="presentation" class="nav-item">
                 <a class="nav-link" id="omemo-tab" href="#omemo-tabpanel" aria-controls="omemo-tabpanel" role="tab" data-toggle="tab">${i18n_omemo}</a>
             </li>
-        </ul>`;
-
+        </ul>` : '';
 
     return html`
         <div class="modal-dialog" role="document">

src/plugins/omemo/overrides/profile-modal.js

@@ -25,15 +25,12 @@ const ProfileModal = {
     },
 
     beforeRender () {
-        const device_id = _converse.omemo_store.get('device_id');
-
+        const device_id = _converse.omemo_store?.get('device_id');
         if (device_id) {
             this.current_device = this.devicelist.devices.get(device_id);
+            this.other_devices = this.devicelist.devices.filter(d => d.get('id') !== device_id);
         }
-        this.other_devices = this.devicelist.devices.filter(d => d.get('id') !== device_id);
-        if (this.__super__.beforeRender) {
-            return this.__super__.beforeRender.apply(this, arguments);
-        }
+        return this.__super__.beforeRender?.apply(this, arguments);
     },
 
     selectAll (ev) {

src/shared/chat/message.js

@@ -276,7 +276,7 @@ export default class Message extends CustomElement {
 
     showUserModal (ev) {
         if (this.model.get('sender') === 'me') {
-            _converse.xmppstatusview.showProfileModal(ev);
+            api.modal.show(_converse.ProfileModal, {model: this.model}, ev);
         } else if (this.model.get('type') === 'groupchat') {
             ev.preventDefault();
             api.modal.show(OccupantModal, { 'model': this.model.occupant }, ev);

src/shared/styles/messages.scss

@@ -10,6 +10,8 @@
     }
     .message {
         .show-msg-author-modal {
+            align-self: flex-start; // Don't expand height to that of largest sibling
+                                    // https://stackoverflow.com/questions/27575779/prevent-a-flex-items-height-from-expanding-to-match-other-flex-items/40156422#40156422
             color: var(--text-color) !important;
         }