Some CSS fixes for overlayed view mode

Make the fonts smaller and tighten up padding.

dev.html

@@ -38,7 +38,7 @@
         muc_respect_autojoin: true,
         muc_show_logs_before_join: true,
         notify_all_room_messages: ['discuss@conference.conversejs.org'],
-        view_mode: 'fullscreen',
+        // view_mode: 'fullscreen',
         websocket_url: 'wss://conversejs.org/xmpp-websocket',
         // websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
         whitelisted_plugins: ['converse-debug'],

src/plugins/chatview/styles/chatbox.scss

@@ -121,7 +121,7 @@
                 color: var(--text-color);
                 font-size: var(--message-font-size);
                 margin: 0;
-                padding: 5px;
+                padding: 0.25em;
             }
         }
         .new-msgs-indicator {

src/shared/chat/styles/unfurl.scss

@@ -10,18 +10,16 @@
             background-color: var(--chat-content-background-color);
             .card-body {
                 padding: 0.75rem;
-                .vcard-title {
-                    font-size: 90%;
+                .card-title {
+                    font-size: 95%;
+                    font-weight: bold;
                 }
             }
             .card-text {
                 converse-rich-text {
-                    font-size: 80%;
+                    font-size: 90%;
                 }
             }
-            .card-img-top {
-                margin-top: 0.75rem;
-            }
         }
     }
 
@@ -30,7 +28,7 @@
         &.converse-fullscreen {
             .message {
                 .card--unfurl {
-                    margin: 1em 0;
+                    margin: 0.5em 0;
                     @include media-breakpoint-down(sm) {
                         max-width: 95%;
                     }
@@ -51,7 +49,7 @@
         &.converse-mobile {
             .message {
                 .card--unfurl {
-                    margin: 1em 0;
+                    margin: 0.5em 0;
                     max-width: 95%;
                 }
             }

src/shared/styles/_variables.scss

@@ -51,3 +51,9 @@ $mobile_portrait_length: 480px !default;
 
     --list-toggle-font-weight: normal;
 }
+
+.conversejs {
+    &.converse-overlayed {
+        --message-font-size: var(--font-size-small);
+    }
+}