Fix large image overflow in comment page (#31740)

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>

diff --git a/templates/repo/issue/fields/markdown.tmpl b/templates/repo/issue/fields/markdown.tmpl
index f6995328dd4d888cda0ee8c3b7c880090b5b9ce7..da8f5e6bdf7c144b5e98c3daa085ee10c3329ff6 100644 (file)
--- 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 68306686ef2985fa92248d6d36f06a80568a5de1..9947b15b9ad5d9e035fe8045cba50c5b0e0c249b 100644 (file)
--- 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 {