Various tweaks (margins and otherwise) around responsiveness

css/converse.css

@@ -4757,16 +4757,15 @@
 
 #converse-embedded-chat,
 #conversejs {
-  height: 0;
-  width: 100vw;
   bottom: 0;
+  height: auto;
+  width: 100vw;
   color: #777;
   direction: ltr;
   display: block;
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: 14px;
   position: fixed;
-  right: 0;
   z-index: 1031; }
   #converse-embedded-chat ::-webkit-input-placeholder,
   #conversejs ::-webkit-input-placeholder {
@@ -5178,14 +5177,13 @@
 @media screen and (max-width: 480px) {
   #conversejs {
     width: auto; } }
-#conversejs .row {
-  flex-direction: row-reverse;
-  flex-wrap: nowrap; }
+#conversejs > .row {
+  flex-direction: row-reverse; }
 
 #converse-embedded-chat .flyout,
 #conversejs .flyout {
   border-radius: 4px;
-  bottom: 3em;
+  bottom: 1em;
   position: absolute; }
   @media screen and (max-height: 450px) {
     #converse-embedded-chat .flyout,
@@ -5205,6 +5203,7 @@
       bottom: 0; } }
 #converse-embedded-chat .chat-head,
 #conversejs .chat-head {
+  flex-wrap: nowrap;
   color: #ffffff;
   font-size: 100%;
   height: 55px;
@@ -5252,8 +5251,7 @@
 #converse-embedded-chat .chatbox,
 #conversejs .chatbox {
   text-align: left;
-  height: 35px;
-  margin: 0 1em; }
+  margin: 0 0.5em; }
   @media screen and (max-height: 450px) {
     #converse-embedded-chat .chatbox,
     #conversejs .chatbox {
@@ -5672,10 +5670,12 @@
   padding: 2px; }
 
 @media (max-width: 767.98px) {
-  #conversejs:not(.fullscreen) .row {
-    flex-direction: column; } }
+  #conversejs:not(.fullscreen) > .row {
+    flex-direction: column; }
+    #conversejs:not(.fullscreen) > .row.no-gutters {
+      margin: -1em; } }
 #conversejs #controlbox {
-  margin-right: 2em; }
+  margin-right: 1.5em; }
   #conversejs #controlbox .pure-form.converse-form {
     padding: 0; }
   #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {
@@ -6030,7 +6030,7 @@
   color: #0a0a0a;
   float: right;
   height: 100%;
-  margin: 0 1em;
+  margin: 0 0.5em;
   padding: 10px 8px 0 8px; }
   #conversejs .toggle-controlbox span {
     color: white; }
@@ -6508,12 +6508,11 @@
   border-radius: 4px; }
 
 #conversejs:not(.fullscreen) #minimized-chats {
+  margin-bottom: -1em;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   color: white;
-  height: 100%;
-  margin-right: 1em;
-  bottom: 3em;
+  margin-right: 0.5em;
   padding: 0; }
   #conversejs:not(.fullscreen) #minimized-chats .badge {
     bottom: 8px;
@@ -6527,6 +6526,7 @@
     text-align: center;
     color: white; }
   #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout {
+    flex-direction: column-reverse;
     width: 100%; }
     #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout .chat-head {
       padding: 0.3em;

css/inverse.css

@@ -4757,16 +4757,15 @@
 
 #converse-embedded-chat,
 #conversejs {
-  height: 0;
-  width: 100vw;
   bottom: 0;
+  height: auto;
+  width: 100vw;
   color: #777;
   direction: ltr;
   display: block;
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: 16px;
   position: fixed;
-  right: 0;
   z-index: 1031; }
   #converse-embedded-chat ::-webkit-input-placeholder,
   #conversejs ::-webkit-input-placeholder {
@@ -5219,28 +5218,23 @@ body {
         padding-right: 10%;
         font-size: 120%; }
 
-#conversejs.fullscreen {
-  height: auto;
-  bottom: 0;
-  left: 0;
-  right: 0; }
-  #conversejs.fullscreen form.pure-form.converse-form {
-    margin: 1em; }
-    #conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] {
-      margin-left: 1em;
-      display: inline;
-      margin-bottom: 2em; }
-    #conversejs.fullscreen form.pure-form.converse-form input[type=text],
-    #conversejs.fullscreen form.pure-form.converse-form input[type=password],
-    #conversejs.fullscreen form.pure-form.converse-form input[type=number],
-    #conversejs.fullscreen form.pure-form.converse-form input[type=button],
-    #conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
-      height: 2.2em; }
-    #conversejs.fullscreen form.pure-form.converse-form input[type=button],
-    #conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
-      padding-left: 1em;
-      padding-right: 1em;
-      margin-right: 1em; }
+#conversejs.fullscreen form.pure-form.converse-form {
+  margin: 1em; }
+  #conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] {
+    margin-left: 1em;
+    display: inline;
+    margin-bottom: 2em; }
+  #conversejs.fullscreen form.pure-form.converse-form input[type=text],
+  #conversejs.fullscreen form.pure-form.converse-form input[type=password],
+  #conversejs.fullscreen form.pure-form.converse-form input[type=number],
+  #conversejs.fullscreen form.pure-form.converse-form input[type=button],
+  #conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
+    height: 2.2em; }
+  #conversejs.fullscreen form.pure-form.converse-form input[type=button],
+  #conversejs.fullscreen form.pure-form.converse-form input[type=submit] {
+    padding-left: 1em;
+    padding-right: 1em;
+    margin-right: 1em; }
 
 #converse-embedded-chat .flyout,
 #conversejs .flyout {
@@ -5265,6 +5259,7 @@ body {
       bottom: 0; } }
 #converse-embedded-chat .chat-head,
 #conversejs .chat-head {
+  flex-wrap: nowrap;
   color: #ffffff;
   font-size: 100%;
   height: 62px;
@@ -5312,7 +5307,6 @@ body {
 #converse-embedded-chat .chatbox,
 #conversejs .chatbox {
   text-align: left;
-  height: 35px;
   margin: 0 0.5em; }
   @media screen and (max-height: 450px) {
     #converse-embedded-chat .chatbox,
@@ -5755,7 +5749,7 @@ body {
   #conversejs.fullscreen .chatbox .row {
     width: calc(100% - 50px); } }
 #conversejs #controlbox {
-  margin-right: 1em; }
+  margin-right: 1.5em; }
   #conversejs #controlbox .pure-form.converse-form {
     padding: 0; }
   #conversejs #controlbox.logged-out .box-flyout .controlbox-pane {

mockup/converse.html

@@ -217,37 +217,37 @@
             </div>
 
             <div id="minimized-chats" class="col col-1 w-100">
-                <a id="toggle-minimized-chats" href="#" class="row no-gutters">
-                    <div class="col"><span id="minimized-count">0</span> Minimized</div>
-                    <span class="badge badge-light">322</span>
-                </a>
-                <div class="flyout minimized-chats-flyout">
+                <div class="flyout minimized-chats-flyout row">
+                    <a id="toggle-minimized-chats" href="#" class="row no-gutters">
+                        <span class="badge badge-light">322</span>
+                        <div class="col"> Minimized</div>
+                    </a>
                     <div class="chat-head chat-head-chatroom row no-gutters">
-                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
-                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Restricted Chatroom</a>
                         <span class="badge badge-light">42</span>
+                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Restricted Chatroom</a>
+                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
                     </div>
                     <div class="chat-head chat-head-chatbox row no-gutters">
-                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
-                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">JC Brand</a>
                         <span class="badge badge-light">4</span>
+                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">JC Brand</a>
+                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
                     </div>
                     <div class="chat-head chat-head-chatroom row no-gutters">
-                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
+                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
                     </div>
                     <div class="chat-head chat-head-chatbox row no-gutters">
-                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
+                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
                     </div>
                     <div class="chat-head chat-head-chatbox row no-gutters">
-                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
-                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Asmaa Haakman</a>
                         <span class="badge badge-light">842</span>
+                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Asmaa Haakman</a>
+                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
                     </div>
                     <div class="chat-head chat-head-chatbox row no-gutters">
-                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
                         <a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
+                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
                     </div>
                 </div>
             </div>

sass/_chatbox.scss

@@ -19,6 +19,7 @@
         }
     }
     .chat-head {
+        flex-wrap: nowrap;
         color: #ffffff;
         font-size: 100%;
         height: $chat-head-height;
@@ -66,7 +67,6 @@
     }
     .chatbox {
         text-align: left;
-        height: $bottom-gutter-height;
         margin: 0 $chat-gutter;
 
         @media screen and (max-height: $mobile-landscape-height) {

sass/_controlbox.scss

@@ -1,6 +1,6 @@
 #conversejs {
     #controlbox {
-        margin-right: 2*$chat-gutter;
+        margin-right: 3*$chat-gutter;
 
         .pure-form.converse-form {
             padding: 0;

sass/_core.scss

@@ -8,16 +8,15 @@
 
 #converse-embedded-chat,
 #conversejs {
-    height: 0;
-    width: 100vw;
     bottom: 0;
+    height: auto;
+    width: 100vw;
     color: $text-color;
     direction: ltr;
     display: block;
     font-family: "Helvetica", "Arial", sans-serif;
     font-size: $font-size;
     position: fixed;
-    right: 0;
     z-index: 1031; // One more than bootstrap navbar
 
     ::-webkit-input-placeholder { /* Chrome/Opera/Safari */

sass/converse/_chatbox.scss

@@ -61,8 +61,12 @@
 
 @include media-breakpoint-down(sm) {
 	#conversejs:not(.fullscreen) {
-		.row {
+		> .row {
 			flex-direction: column;
+
+            &.no-gutters {
+                margin: -1em;
+            }
 		}
 	}
 }

sass/converse/_core.scss

@@ -1,6 +1,5 @@
 #conversejs {
-    .row {
+    > .row {
         flex-direction: row-reverse;
-        flex-wrap: nowrap;
     }
 }

sass/converse/_minimized_chats.scss

@@ -1,11 +1,10 @@
 #conversejs:not(.fullscreen) {
     #minimized-chats {
+        margin-bottom: -2*$chat-gutter;
         border-top-left-radius: $chatbox-border-radius;
         border-top-right-radius: $chatbox-border-radius;
         color: $inverse-link-color;
-        height: 100%;
         margin-right: $chat-gutter;
-        bottom: 3*$chat-gutter;
         padding: 0;
 
         .badge {
@@ -24,6 +23,7 @@
         }
 
         .minimized-chats-flyout {
+            flex-direction: column-reverse;
             width: 100%;
 
             .chat-head {

sass/converse/_variables.scss

@@ -87,7 +87,7 @@ $info-color: $dark-green !default;
 $button-border-radius: 5px !default;
 $chatbox-border-radius: 4px !default;
 $bottom-gutter-height: 35px !default;
-$chatbox-hover-height: 3em !default;
+$chatbox-hover-height: 1em !default;
 
 $mobile_landscape_height: 450px !default;
 $mobile_portrait_length: 480px !default;
@@ -111,7 +111,7 @@ $line-height-large:  20px !default;
 $controlbox-width: 200px !default;
 $chat-width: 200px !default;
 $chat-height: 450px !default;
-$chat-gutter: 1em !default;
+$chat-gutter: 0.5em !default;
 $minimized-chats-width: 130px !default;
 
 $mobile-chat-width: 100% !default;

sass/inverse/_core.scss

@@ -35,10 +35,6 @@ body {
 }
 
 #conversejs.fullscreen {
-    height: auto;
-    bottom: 0;
-    left: 0;
-    right: 0;
 
     form {
         &.pure-form.converse-form {