From: Tim Düsterhus <duesterhus@woltlab.com>
Date: Fri, 26 Jun 2020 11:40:10 +0000 (+0200)
Subject: Limit media images' caption size to image width
X-Git-Tag: 5.3.0_Alpha_1~186^2
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=9b6a008c7c15ce8fb61e45f6e592421af9c3dc54;p=GitHub%2FWoltLab%2FWCF.git

Limit media images' caption size to image width

Resolves #3228
---

diff --git a/com.woltlab.wcf/templates/mediaBBCodeTag.tpl b/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
index 01a0c79541..975e4bbf55 100644
--- a/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
+++ b/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
@@ -8,11 +8,13 @@
 	
 	{if $media->caption}
 		<span class="mediaBBCodeCaption">
-			{if $media->captionEnableHtml}
-				{@$media->caption}
-			{else}
-				{$media->caption}
-			{/if}
+			<span class="mediaBBCodeCaptionAlignment">
+				{if $media->captionEnableHtml}
+					{@$media->caption}
+				{else}
+					{$media->caption}
+				{/if}
+			</span>
 		</span>
 	{/if}
 </span>
diff --git a/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl b/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl
index 01a0c79541..975e4bbf55 100644
--- a/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl
+++ b/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl
@@ -8,11 +8,13 @@
 	
 	{if $media->caption}
 		<span class="mediaBBCodeCaption">
-			{if $media->captionEnableHtml}
-				{@$media->caption}
-			{else}
-				{$media->caption}
-			{/if}
+			<span class="mediaBBCodeCaptionAlignment">
+				{if $media->captionEnableHtml}
+					{@$media->caption}
+				{else}
+					{$media->caption}
+				{/if}
+			</span>
 		</span>
 	{/if}
 </span>
diff --git a/wcfsetup/install/files/style/bbcode/media.scss b/wcfsetup/install/files/style/bbcode/media.scss
index 12baf263c0..af46f1c9fe 100644
--- a/wcfsetup/install/files/style/bbcode/media.scss
+++ b/wcfsetup/install/files/style/bbcode/media.scss
@@ -1,14 +1,22 @@
 .mediaBBCode {
-	display: inline-block;
+	display: table;
 	max-width: 100%;
 	
 	.mediaBBCodeCaption {
 		color: $wcfContentDimmedText;
-		display: block;
+		// https://stackoverflow.com/a/11652170/782822
+		display: table-caption;
+		caption-side: bottom;
 		margin-top: 5px;
 		text-align: center;
 		
 		@include wcfFontSmall;
+		
+		.mediaBBCodeCaptionAlignment {
+			// https://stackoverflow.com/a/43627669/782822
+			display: inline-block;
+			text-align: justify;
+		}
 	}
 	
 	video {