sidebar: Show shortened text in overlay mode

sass/_chatrooms.scss

@@ -185,7 +185,7 @@
                     }
 
                     .fa-user-plus {
-                        margin-right: 0.5em;
+                        margin-right: 0.25em;
                     }
 
                     .occupants-heading {

sass/_core.scss

@@ -542,8 +542,8 @@ body.converse-fullscreen {
     }
 
     .btn-circle {
-        width: 32px;
-        height: 32px;
+        width: 30px;
+        height: 30px;
         text-align: center;
         padding: 0.5em 0;
         font-size: var(--font-size-small);

src/converse-muc-views.js

@@ -2184,6 +2184,7 @@ converse.plugins.add('converse-muc-views', {
             toHTML () {
                 return tpl_muc_sidebar(
                     Object.assign(this.chatroomview.model.toJSON(), {
+                        _converse,
                         'features': this.chatroomview.model.features,
                         'occupants': this.model.models,
                         'invitesAllowed': () => this.invitesAllowed(),

src/templates/muc_sidebar.js

@@ -15,7 +15,8 @@ const PRETTY_CHAT_STATUS = {
 
 const occupant_hint = (occupant) => __('Click to mention %1$s in your message.', occupant.get('nick'))
 
-const i18n_invite_hint = __('Invite someone');
+const i18n_invite = (o) => o._converse.view_mode === 'overlayed' ? __('Invite') : __('Invite someone');
+const i18n_invite_hint = __('Invite someone to join this groupchat');
 const i18n_participants = __('Participants');
 
 
@@ -28,7 +29,7 @@ const invite_widget = (o) => {
               data-target="#muc-invite-modal"
               @click=${o.showInviteModal}>
             <i class="btn btn-primary btn-circle fa fa-user-plus"></i>
-            ${i18n_invite_hint}
+            ${i18n_invite(o)}
          </a>`;
    } else {
        return '';