Tweak margin and padding for messages

css/converse.css

@@ -7350,7 +7350,7 @@ body.reset {
       line-height: 14px;
       color: #3AA569;
       font-size: 12px;
-      margin: 0.5em; }
+      margin: 0.5em 0; }
       #converse-embedded-chat .chatbox .chat-body .chat-info.badge,
       #conversejs .chatbox .chat-body .chat-info.badge {
         color: white; }
@@ -7381,7 +7381,8 @@ body.reset {
     #converse-embedded-chat .chatbox .chat-body .chat-message,
     #conversejs .chatbox .chat-body .chat-message {
       overflow: auto;
-      margin: 0.3em; }
+      margin: 0;
+      padding: 0.4em 0; }
       #converse-embedded-chat .chatbox .chat-body .chat-message.onload,
       #conversejs .chatbox .chat-body .chat-message.onload {
         animation: colorchange-chatmessage 1s;
@@ -7431,7 +7432,7 @@ body.reset {
   #converse-embedded-chat .chatbox .chat-content,
   #conversejs .chatbox .chat-content {
     height: 100%;
-    padding: 0.5em;
+    padding: 1em;
     font-size: 13px;
     color: #777;
     overflow-y: auto;
@@ -7442,6 +7443,9 @@ body.reset {
     #conversejs .chatbox .chat-content .toggle-spoiler:before {
       padding-right: 0.25em;
       whitespace: nowrap; }
+    #converse-embedded-chat .chatbox .chat-content progress,
+    #conversejs .chatbox .chat-content progress {
+      width: 100%; }
   #converse-embedded-chat .chatbox .chat-content-sendbutton,
   #conversejs .chatbox .chat-content-sendbutton {
     height: calc(100% - 93px); }
@@ -7699,7 +7703,6 @@ body.reset {
     width: 250px; }
   #converse-embedded-chat .chatbox .chat-body .chat-message,
   #conversejs:not(.fullscreen) .chatbox .chat-body .chat-message {
-    padding: 0.3em;
     line-height: 20px; }
     #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
     #conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-author {

css/inverse.css

@@ -7403,7 +7403,7 @@ body {
       line-height: 20px;
       color: #3AA569;
       font-size: 14px;
-      margin: 0.5em; }
+      margin: 0.5em 0; }
       #converse-embedded-chat .chatbox .chat-body .chat-info.badge,
       #conversejs .chatbox .chat-body .chat-info.badge {
         color: white; }
@@ -7434,7 +7434,8 @@ body {
     #converse-embedded-chat .chatbox .chat-body .chat-message,
     #conversejs .chatbox .chat-body .chat-message {
       overflow: auto;
-      margin: 0.3em; }
+      margin: 0;
+      padding: 0.4em 0; }
       #converse-embedded-chat .chatbox .chat-body .chat-message.onload,
       #conversejs .chatbox .chat-body .chat-message.onload {
         animation: colorchange-chatmessage 1s;
@@ -7484,7 +7485,7 @@ body {
   #converse-embedded-chat .chatbox .chat-content,
   #conversejs .chatbox .chat-content {
     height: 100%;
-    padding: 0.5em;
+    padding: 1em;
     font-size: 13px;
     color: #777;
     overflow-y: auto;
@@ -7495,6 +7496,9 @@ body {
     #conversejs .chatbox .chat-content .toggle-spoiler:before {
       padding-right: 0.25em;
       whitespace: nowrap; }
+    #converse-embedded-chat .chatbox .chat-content progress,
+    #conversejs .chatbox .chat-content progress {
+      width: 100%; }
   #converse-embedded-chat .chatbox .chat-content-sendbutton,
   #conversejs .chatbox .chat-content-sendbutton {
     height: calc(100% - 93px); }
@@ -7773,8 +7777,7 @@ body {
     border-top-right-radius: 4px; }
     #conversejs.fullscreen .chatbox .chat-body .chat-message {
       line-height: 22px;
-      font-size: 14px;
-      padding: 0.4em 0; }
+      font-size: 14px; }
       #conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-author {
         line-height: 22px; }
       #conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-content {

sass/_chatbox.scss

@@ -178,7 +178,7 @@
                 line-height: $line-height-small;
                 color: $chat-head-color;
                 font-size: $font-size-small;
-                margin: 0.5em;
+                margin: 0.5em 0;
                 &.badge {
                     color: $chat-head-text-color;
                 }
@@ -209,7 +209,8 @@
             }
             .chat-message {
                 overflow: auto; // Ensures that content stays inside
-                margin: 0.3em;
+                margin: 0;
+                padding: 0.4em 0;
 
                 &.onload {
                     animation: colorchange-chatmessage 1s;
@@ -267,7 +268,7 @@
         }
         .chat-content {
             height: 100%;
-            padding: 0.5em;
+            padding: 1em;
             font-size: 13px;
             color: $text-color;
             overflow-y: auto;
@@ -279,6 +280,10 @@
                 padding-right: 0.25em;
                 whitespace: nowrap;
             }
+
+            progress {
+                width: 100%
+            }
         }
         .chat-content-sendbutton {
             height: calc(100% - #{$chat-textarea-height + $send-button-height + 2*$send-button-margin});

sass/converse/_chatbox.scss

@@ -23,7 +23,6 @@
 
         .chat-body {
             .chat-message {
-                padding: 0.3em;
                 line-height: $line-height-large;
                 .chat-msg-author {
                     line-height: $line-height-large;

sass/inverse/_chatbox.scss

@@ -50,7 +50,6 @@
             .chat-message {
                 line-height: $line-height;
                 font-size: $font-size-small;
-                padding: 0.4em 0;
                 .chat-msg-author {
                     line-height: $line-height;
                 }