Avoid double wrapping with anchor tag and tweak unfurl CSS

to make it smaller on large screens.

src/shared/chat/styles/unfurl.scss

@@ -5,11 +5,27 @@
 .conversejs {
     @import "bootstrap/scss/card";
 
-    converse-chats {
+    converse-message-unfurl {
         .card--unfurl {
             background-color: var(--chat-content-background-color);
+            .card-body {
+                padding: 0.75rem;
+                .vcard-title {
+                    font-size: 90%;
+                }
+            }
+            .card-text {
+                converse-rich-text {
+                    font-size: 80%;
+                }
+            }
+            .card-img-top {
+                margin-top: 0.75rem;
+            }
         }
+    }
 
+    converse-chats {
         &.converse-embedded,
         &.converse-fullscreen {
             .message {
@@ -22,10 +38,10 @@
                         max-width: 75%;
                     }
                     @include media-breakpoint-up(lg) {
-                        max-width: 66%;
+                        max-width: 60%;
                     }
                     @include media-breakpoint-up(xl) {
-                        max-width: 50%;
+                        max-width: 30%;
                     }
                 }
             }

src/shared/chat/templates/unfurl.js

@@ -17,14 +17,14 @@ const tpl_url_wrapper = (o, wrapped_template) =>
         : wrapped_template(o);
 
 const tpl_image = o =>
-    html`<converse-image class="card-img-top" href="${o.url}" src="${o.image}" .onImgLoad=${o.onload}></converse-image>`;
+    html`<converse-image class="card-img-top hor_centered" href="${o.url}" src="${o.image}" .onImgLoad=${o.onload}></converse-image>`;
 
 export default o => {
     const show_image = isValidImage(o.image);
     const has_body_info = o.title || o.description || o.url;
     if (show_image || has_body_info) {
         return html`<div class="card card--unfurl">
-            ${show_image ? tpl_url_wrapper(o, tpl_image) : ''}
+            ${show_image ? tpl_image(o) : ''}
             ${has_body_info
                 ? html` <div class="card-body">
                       ${o.title ? tpl_url_wrapper(o, o => html`<h5 class="card-title">${o.title}</h5>`) : ''}