From 9b6a008c7c15ce8fb61e45f6e592421af9c3dc54 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Tim=20D=C3=BCsterhus?= <duesterhus@woltlab.com>
Date: Fri, 26 Jun 2020 13:40:10 +0200
Subject: [PATCH] Limit media images' caption size to image width

Resolves #3228
---
 com.woltlab.wcf/templates/mediaBBCodeTag.tpl         | 12 +++++++-----
 .../install/files/acp/templates/mediaBBCodeTag.tpl   | 12 +++++++-----
 wcfsetup/install/files/style/bbcode/media.scss       | 12 ++++++++++--
 3 files changed, 24 insertions(+), 12 deletions(-)

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 {
-- 
2.20.1