CSS: display rendered images as blocks

sass/_messages.scss

@@ -77,6 +77,7 @@
             max-height: 15em;
             max-width: 100%;
         }
+
         &.chat-msg--action {
             font-style: italic;
 
@@ -196,6 +197,9 @@
                     word-wrap: break-word;
                     word-break: break-all;
                     display: inline-block;
+                    &.chat-image__link {
+                        display: block;
+                    }
                 }
                 img {
                     &.emoji {

src/templates/image.js

@@ -1,3 +1,3 @@
 import { html } from "lit-html";
 
-export default (o) => html`<a href="${o.url}" target="_blank" rel="noopener"><img class="chat-image img-thumbnail" src="${o.url}"/></a>`;
+export default (o) => html`<a href="${o.url}" class="chat-image__link" target="_blank" rel="noopener"><img class="chat-image img-thumbnail" src="${o.url}"/></a>`;

src/utils/html.js

@@ -189,6 +189,7 @@ async function renderImage (img_url, link_url, el, callback) {
         }
         sizzle(`a[href="${link_url}"]`, el).forEach(a => {
             a.innerHTML = "";
+            u.addClass('chat-image__link', a);
             u.addClass('chat-image', img);
             u.addClass('img-thumbnail', img);
             a.insertAdjacentElement('afterBegin', img);