From e546480d0a2bbd9fcf897d7506a1efe3fa44cef3 Mon Sep 17 00:00:00 2001
From: charles <30816317+charles7668@users.noreply.github.com>
Date: Sat, 16 Nov 2024 02:34:54 +0800
Subject: [PATCH] Fix large image overflow in comment page (#31740)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close #31709

52px is calculate by avatar size in
templates\repo\issue\view_content\comments.tmpl
```html
<img src="{{.Poster.AvatarLink $.Context}}" width="40" height="40">
```
+
```css
.ui.comments .comment > .avatar ~ .content {
  margin-left: 12px;
}
```


![圖片](https://github.com/user-attachments/assets/bf15f4d4-1574-46f6-9f5e-1fbdbf1a98b0)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/repo/issue/fields/markdown.tmpl | 2 +-
 web_src/css/modules/comment.css           | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/templates/repo/issue/fields/markdown.tmpl b/templates/repo/issue/fields/markdown.tmpl
index f6995328dd..da8f5e6bdf 100644
--- a/templates/repo/issue/fields/markdown.tmpl
+++ b/templates/repo/issue/fields/markdown.tmpl
@@ -1,3 +1,3 @@
 <div class="field {{if not .item.VisibleOnForm}}tw-hidden{{end}}">
-	<div>{{ctx.RenderUtils.MarkdownToHtml .item.Attributes.value}}</div>
+	<div class="markup">{{ctx.RenderUtils.MarkdownToHtml .item.Attributes.value}}</div>
 </div>
diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css
index 68306686ef..9947b15b9a 100644
--- a/web_src/css/modules/comment.css
+++ b/web_src/css/modules/comment.css
@@ -53,6 +53,7 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  min-width: 0;
 }
 
 .ui.comments .comment > .avatar ~ .content {