For some reason everything is 0.5em to the right

css/converse.css

@@ -4757,6 +4757,7 @@
 
 #converse-embedded-chat,
 #conversejs {
+  margin-left: -0.5em;
   bottom: 0;
   height: auto;
   width: 100vw;
@@ -6140,7 +6141,8 @@
       #conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
         color: #777;
         display: block;
-        width: 100%; }
+        width: 100%;
+        line-height: 16px; }
         #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
           color: #585B51; }
       #conversejs #converse-roster .roster-contacts .roster-group li {

css/inverse.css

@@ -4757,6 +4757,7 @@
 
 #converse-embedded-chat,
 #conversejs {
+  margin-left: -0.5em;
   bottom: 0;
   height: auto;
   width: 100vw;
@@ -6264,7 +6265,8 @@ body {
       #conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
         color: #777;
         display: block;
-        width: 100%; }
+        width: 100%;
+        line-height: 22px; }
         #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
           color: #585B51; }
       #conversejs #converse-roster .roster-contacts .roster-group li {

sass/_core.scss

@@ -8,6 +8,7 @@
 
 #converse-embedded-chat,
 #conversejs {
+    margin-left: -$chat-gutter; // It's a mystery why this is necessary
     bottom: 0;
     height: auto;
     width: 100vw;

sass/_roster.scss

@@ -106,6 +106,7 @@
                 color: $text-color;
                 display: block;
                 width: 100%;
+                line-height: $line-height;
             }
 
             li {