Force unfurled URLs into separate rows

diff --git a/com.woltlab.wcf/templates/unfurlUrl.tpl b/com.woltlab.wcf/templates/unfurlUrl.tpl
index 80cfae04d3207e6688fa578367ac8d8bf78b6a6c..4b9805ee436617686a1875b4ad472769ef78f253 100644 (file)
--- a/com.woltlab.wcf/templates/unfurlUrl.tpl
+++ b/com.woltlab.wcf/templates/unfurlUrl.tpl
@@ -2,17 +2,19 @@
        {if $object->isPlainUrl()}
                <a {anchorAttributes url=$object->url isUgc=$enableUgc}>{$object->title}</a>
        {else}
-               <div class="unfurlUrlCard{*
-                       *}{if $object->hasCoverImage()} unfurlUrlCardCoverImage{/if}{*
-                       *}{if $object->hasSquaredImage()} unfurlUrlCardSquaredImage{/if}{*
-               *}">
-                       {if !$object->getImageUrl()|empty}
-                               <img src="{$object->getImageUrl()}" height="{$object->height}" width="{$object->width}" class="unfurlUrlImage" alt="" loading="lazy">
-                       {/if}
-                       <div class="unfurlUrlInformation">
-                               <a class="unfurlUrlTitle" {anchorAttributes url=$object->url appendClassname=false isUgc=$enableUgc}>{$object->title}</a>
-                               <div class="unfurlUrlDescription">{$object->description}</div>
-                               <div class="unfurlUrlHost">{$object->getHost()}</div>
+               <div class="unfurlUrlCardContainer">
+                       <div class="unfurlUrlCard{*
+                               *}{if $object->hasCoverImage()} unfurlUrlCardCoverImage{/if}{*
+                               *}{if $object->hasSquaredImage()} unfurlUrlCardSquaredImage{/if}{*
+                       *}">
+                               {if !$object->getImageUrl()|empty}
+                                       <img src="{$object->getImageUrl()}" height="{$object->height}" width="{$object->width}" class="unfurlUrlImage" alt="" loading="lazy">
+                               {/if}
+                               <div class="unfurlUrlInformation">
+                                       <a class="unfurlUrlTitle" {anchorAttributes url=$object->url appendClassname=false isUgc=$enableUgc}>{$object->title}</a>
+                                       <div class="unfurlUrlDescription">{$object->description}</div>
+                                       <div class="unfurlUrlHost">{$object->getHost()}</div>
+                               </div>
                        </div>
                </div>
        {/if}

diff --git a/wcfsetup/install/files/acp/templates/unfurlUrl.tpl b/wcfsetup/install/files/acp/templates/unfurlUrl.tpl
index 80cfae04d3207e6688fa578367ac8d8bf78b6a6c..4b9805ee436617686a1875b4ad472769ef78f253 100644 (file)
--- a/wcfsetup/install/files/acp/templates/unfurlUrl.tpl
+++ b/wcfsetup/install/files/acp/templates/unfurlUrl.tpl
@@ -2,17 +2,19 @@
        {if $object->isPlainUrl()}
                <a {anchorAttributes url=$object->url isUgc=$enableUgc}>{$object->title}</a>
        {else}
-               <div class="unfurlUrlCard{*
-                       *}{if $object->hasCoverImage()} unfurlUrlCardCoverImage{/if}{*
-                       *}{if $object->hasSquaredImage()} unfurlUrlCardSquaredImage{/if}{*
-               *}">
-                       {if !$object->getImageUrl()|empty}
-                               <img src="{$object->getImageUrl()}" height="{$object->height}" width="{$object->width}" class="unfurlUrlImage" alt="" loading="lazy">
-                       {/if}
-                       <div class="unfurlUrlInformation">
-                               <a class="unfurlUrlTitle" {anchorAttributes url=$object->url appendClassname=false isUgc=$enableUgc}>{$object->title}</a>
-                               <div class="unfurlUrlDescription">{$object->description}</div>
-                               <div class="unfurlUrlHost">{$object->getHost()}</div>
+               <div class="unfurlUrlCardContainer">
+                       <div class="unfurlUrlCard{*
+                               *}{if $object->hasCoverImage()} unfurlUrlCardCoverImage{/if}{*
+                               *}{if $object->hasSquaredImage()} unfurlUrlCardSquaredImage{/if}{*
+                       *}">
+                               {if !$object->getImageUrl()|empty}
+                                       <img src="{$object->getImageUrl()}" height="{$object->height}" width="{$object->width}" class="unfurlUrlImage" alt="" loading="lazy">
+                               {/if}
+                               <div class="unfurlUrlInformation">
+                                       <a class="unfurlUrlTitle" {anchorAttributes url=$object->url appendClassname=false isUgc=$enableUgc}>{$object->title}</a>
+                                       <div class="unfurlUrlDescription">{$object->description}</div>
+                                       <div class="unfurlUrlHost">{$object->getHost()}</div>
+                               </div>
                        </div>
                </div>
        {/if}

diff --git a/wcfsetup/install/files/style/ui/unfurlUrl.scss b/wcfsetup/install/files/style/ui/unfurlUrl.scss
index 2373daa7f31c34cd080020af07161d33fb9b93ae..09a38029204c6fd50e114bfae1cd61bba91af585 100644 (file)
--- a/wcfsetup/install/files/style/ui/unfurlUrl.scss
+++ b/wcfsetup/install/files/style/ui/unfurlUrl.scss
@@ -1,3 +1,7 @@
+.unfurlUrlCardContainer {
+       margin: 1em 0 0 0;
+}
+
 .unfurlUrlCard {
        background-color: var(--wcfContentBackground);
        border-radius: 3px;
@@ -6,7 +10,6 @@
                0 1px 2px rgba(0, 0, 0, 0.24);
        color: var(--wcfContentText);
        display: inline-block;
-       margin: 1em 0 0 0;
        max-width: 100%;
        overflow: hidden;
        position: relative;