Fixes #2137: Show back arrow on mobile

sass/_chatbox.scss

@@ -618,8 +618,9 @@
         .chatbox {
             .box-flyout {
                 .chatbox-navback {
+                    margin: auto 0;
+                    margin-right: 1em;
                     display: flex;
-                    padding-right: 1em;
                     .fa-arrow-left {
                         &:before {
                             color: white;

sass/_chatrooms.scss

@@ -89,8 +89,9 @@
         .chatbox-title__text {
             display: var(--heading-display);
             font-weight: var(--chatroom-head-title-font-weight);
-            padding-right: var(--chatroom-head-title-padding-right);
             margin: auto 0;
+            padding-right: var(--chatroom-head-title-padding-right);
+            white-space: nowrap;
             .chatroom-jid {
                 font-size: var(--font-size-small);
             }
@@ -520,3 +521,25 @@
         }
     }
 }
+
+
+@include media-breakpoint-down(sm) {
+    #conversejs.converse-mobile,
+    #conversejs.converse-overlayed,
+    #conversejs.converse-fullscreen {
+        .chatbox {
+            .box-flyout {
+                .chat-head-chatroom {
+                    .chatbox-navback {
+                        margin-right: 0 !important;
+                        .fa-arrow-left {
+                            &:before {
+                                color: var(--chatroom-head-color);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/templates/chatroom_head.js

@@ -17,7 +17,7 @@ export default (o) => {
     const show_subject = (subject && !o.subject_hidden);
     return html`
         <div class="chatbox-title ${ show_subject ? '' :  "chatbox-title--no-desc"}">
-            ${ (o._converse.standalone) ? html`<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>` : '' }
+            ${ (!o._converse.api.settings.get("singleton")) ? html`<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>` : '' }
             <div class="chatbox-title__text" title="${ (o._converse.locked_muc_domain !== 'hidden') ? o.jid : '' }">${ o.title }
                 ${ (o.bookmarked) ? html`<i class="fa fa-bookmark chatbox-title__text--bookmarked" title="${i18n_bookmarked}"></i>` : '' }
             </div>