diff --git a/css/converse.css b/css/converse.css
index f581425a4..4e7ec5817 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -4803,10 +4803,9 @@
   #converse-embedded-chat .sidebar,
   #conversejs .sidebar {
     display: none;
-    position: absolute;
     width: 50px;
     height: 100vh;
-    padding: 10px 0;
+    padding: 1rem 0;
     background-color: #578EA9;
     color: white;
     text-align: center; }
@@ -5604,15 +5603,21 @@
       left: 0; }
 
 @media screen and (max-width: 767px) {
+  #conversejs > .row {
+    flex-direction: row-reverse; }
   #conversejs #login-dialog .pure-form.converse-form {
     padding: 3em 2em 3em; }
-  #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
-    white-space: normal; }
-  #conversejs .chatbox .row .box-flyout {
-    left: 50px;
-    bottom: 0;
-    height: 100vh;
-    box-shadow: none; } }
+  #conversejs .sidebar {
+    display: block; }
+  #conversejs .chatbox {
+    width: calc(100% - 50px); }
+    #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
+      white-space: normal; }
+    #conversejs .chatbox .row .box-flyout {
+      left: 50px;
+      bottom: 0;
+      height: 100vh;
+      box-shadow: none; } }
 #converse-embedded-chat .chat-head,
 #conversejs:not(.fullscreen) .chat-head {
   border-top-left-radius: 4px;
@@ -6036,12 +6041,11 @@
   #conversejs #controlbox #users {
     position: absolute;
     top: 0;
-    left: 50px;
-    display: none;
-    width: calc(100% - 50px); }
+    display: none; }
     #conversejs #controlbox #users.controlbox-pane {
-      height: 100vh; }
-  #conversejs.sidebar-open > .chatbox:not(#controlbox) {
+      height: 100vh;
+      width: 100%; }
+  #conversejs.sidebar-open .chatbox:not(#controlbox) {
     display: none; }
   #conversejs.sidebar-open #controlbox #users {
     display: block; } }
diff --git a/css/inverse.css b/css/inverse.css
index 6c6d95bc3..18a59d63f 100644
--- a/css/inverse.css
+++ b/css/inverse.css
@@ -4803,10 +4803,9 @@
   #converse-embedded-chat .sidebar,
   #conversejs .sidebar {
     display: none;
-    position: absolute;
     width: 50px;
     height: 100vh;
-    padding: 10px 0;
+    padding: 1rem 0;
     background-color: #578EA9;
     color: white;
     text-align: center; }
@@ -5660,15 +5659,21 @@ body {
       left: 0; }
 
 @media screen and (max-width: 767px) {
+  #conversejs > .row {
+    flex-direction: row-reverse; }
   #conversejs #login-dialog .pure-form.converse-form {
     padding: 3em 2em 3em; }
-  #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
-    white-space: normal; }
-  #conversejs .chatbox .row .box-flyout {
-    left: 50px;
-    bottom: 0;
-    height: 100vh;
-    box-shadow: none; } }
+  #conversejs .sidebar {
+    display: block; }
+  #conversejs .chatbox {
+    width: calc(100% - 50px); }
+    #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
+      white-space: normal; }
+    #conversejs .chatbox .row .box-flyout {
+      left: 50px;
+      bottom: 0;
+      height: 100vh;
+      box-shadow: none; } }
 #conversejs.fullscreen .chatbox-btn {
   font-size: 18px;
   margin: 0 0.3em; }
@@ -5728,10 +5733,10 @@ body {
       padding-right: 10px; }
 
 @media screen and (max-width: 767px) {
-  #conversejs.fullscreen > .chatbox {
+  #conversejs.fullscreen .chatbox {
     width: calc(100% - 50px); }
-  #conversejs.fullscreen .chatbox .row {
-    width: calc(100% - 50px); } }
+    #conversejs.fullscreen .chatbox .row {
+      width: calc(100% - 50px); } }
 #conversejs #controlbox {
   margin-right: 1.5em; }
   #conversejs #controlbox .pure-form.converse-form {
@@ -6110,12 +6115,11 @@ body {
   #conversejs #controlbox #users {
     position: absolute;
     top: 0;
-    left: 50px;
-    display: none;
-    width: calc(100% - 50px); }
+    display: none; }
     #conversejs #controlbox #users.controlbox-pane {
-      height: 100vh; }
-  #conversejs.sidebar-open > .chatbox:not(#controlbox) {
+      height: 100vh;
+      width: 100%; }
+  #conversejs.sidebar-open .chatbox:not(#controlbox) {
     display: none; }
   #conversejs.sidebar-open #controlbox #users {
     display: block; } }
diff --git a/mockup/chatbox.html b/mockup/chatbox.html
index b77d03393..f5d51cffc 100644
--- a/mockup/chatbox.html
+++ b/mockup/chatbox.html
@@ -10,11 +10,11 @@
 
 <body>
     <div id="conversejs" class="fullscreen">
+        <div class="sidebar"></div>
         <div class="row no-gutters">
             <div id="controlbox" class="chatbox col-xl-2 col-md-3">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
-                        <div class="sidebar"></div>
                         <div id="users" class="controlbox-pane"></div>
                     </div>
                 </div>
diff --git a/mockup/chatroom.html b/mockup/chatroom.html
index 6b0840afd..bcdc787d6 100644
--- a/mockup/chatroom.html
+++ b/mockup/chatroom.html
@@ -10,11 +10,11 @@
 
 <body>
     <div id="conversejs" class="fullscreen">
+        <div class="sidebar"></div>
         <div class="row no-gutters">
             <div id="controlbox" class="chatbox col-xl-2 col-md-3">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
-                        <div class="sidebar"></div>
                         <div id="users" class="controlbox-pane"></div>
                     </div>
                 </div>
diff --git a/mockup/sidebar.js b/mockup/sidebar.js
index a037dbc1d..dfd0830c9 100644
--- a/mockup/sidebar.js
+++ b/mockup/sidebar.js
@@ -16,7 +16,7 @@ const Sidebar = Backbone.NativeView.extend({
         if (_.includes(converse_el.classList, 'sidebar-open')) {
             converse_el.classList.remove('sidebar-open');
             hamburger.classList.remove('fa-times');
-            hamburger.classList.remove('fa-bars');
+            hamburger.classList.add('fa-bars');
         } else {
             converse_el.classList.add('sidebar-open');
             hamburger.classList.remove('fa-bars');
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss
index df75e6573..cb4cf30be 100644
--- a/sass/_chatbox.scss
+++ b/sass/_chatbox.scss
@@ -438,12 +438,23 @@
 
 @media screen and (max-width: 767px) {
     #conversejs  {
+        > .row {
+            flex-direction: row-reverse;
+        }
+
         #login-dialog {
             .pure-form.converse-form {
                 padding: 3em 2em 3em;
             }
         }
+
+        .sidebar {
+            display: block;
+        }
+
         .chatbox {
+            width: calc(100% - 50px);
+
             .chat-body {
                 .chat-message {
                     .chat-msg-author {
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index ea188c2ad..188c9e7a4 100644
--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -522,19 +522,17 @@
             #users {
                 position: absolute;
                 top: 0;
-                left: 50px;
                 display: none;
-                width: calc(100% - 50px);
-
                 &.controlbox-pane {
                     height: 100vh;
+                    width: 100%;
                 }
             }
 
         }
 
         &.sidebar-open {
-            > .chatbox:not(#controlbox) {
+            .chatbox:not(#controlbox) {
                 display: none;
             }
             #controlbox {
diff --git a/sass/_core.scss b/sass/_core.scss
index 2e97e1323..c1e19c2e3 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -54,10 +54,9 @@
 
      .sidebar {
         display: none;
-        position: absolute;
         width: 50px;
         height: 100vh;
-        padding: 10px 0;
+        padding: 1rem 0;
         background-color: $controlbox-head-color;
         color: white;
         text-align: center;
diff --git a/sass/inverse/_chatbox.scss b/sass/inverse/_chatbox.scss
index 5920357e8..9692dcc8f 100644
--- a/sass/inverse/_chatbox.scss
+++ b/sass/inverse/_chatbox.scss
@@ -88,10 +88,8 @@
 
 @media screen and (max-width: 767px) {
     #conversejs.fullscreen  {
-        > .chatbox {
-            width: calc(100% - 50px);
-        }
         .chatbox {
+            width: calc(100% - 50px);
             .row {
                 width: calc(100% - 50px);
             }
diff --git a/sass/inverse/_controlbox.scss b/sass/inverse/_controlbox.scss
index 57afcffb7..65c183151 100644
--- a/sass/inverse/_controlbox.scss
+++ b/sass/inverse/_controlbox.scss
@@ -1,5 +1,4 @@
 #conversejs.fullscreen {
-
     #controlbox {
         margin: 0;