fix: 修复评论区组件被截断问题

- 调整 .comment-item-inner 宽度为 calc(100% - 55px) 并添加 flex 布局支持
- 为 .comment-item-title 添加 flex-wrap 和 align-items 属性,防止标题区域溢出
- 优化 .comment-info 布局,使用 flex 布局和 gap 间距,支持自动换行
- 改进 .comment-useragent 显示方式,使用 inline-flex 并添加 flex-shrink: 0 防止被压缩
- 统一调整各元素的 flex-shrink 属性,确保内容不会被截断
This commit is contained in:
2026-01-12 15:07:53 +08:00
parent 8054861a5c
commit e604c8ed4c

View File

@@ -5235,7 +5235,11 @@ html.darkmode .has-thumbnail .related-post-title.clamp {
position: relative; position: relative;
width: calc(100% - 50px); width: calc(100% - 55px);
flex: 1;
min-width: 0;
overflow-wrap: break-word; overflow-wrap: break-word;
@@ -5257,6 +5261,10 @@ html.darkmode .has-thumbnail .related-post-title.clamp {
display: flex; display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 3px; margin-bottom: 3px;
} }
@@ -5335,6 +5343,14 @@ html.darkmode .has-thumbnail .related-post-title.clamp {
margin-left: 3px; margin-left: 3px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
} }
.comment-info > div { .comment-info > div {
@@ -5343,6 +5359,8 @@ html.darkmode .has-thumbnail .related-post-title.clamp {
white-space: nowrap; white-space: nowrap;
flex-shrink: 0;
} }
.comment-time-details { .comment-time-details {
@@ -5433,7 +5451,9 @@ html.darkmode .has-thumbnail .related-post-title.clamp {
.comment-useragent { .comment-useragent {
display: inline-block; display: inline-flex;
align-items: center;
font-weight: normal; font-weight: normal;
@@ -5441,7 +5461,7 @@ html.darkmode .has-thumbnail .related-post-title.clamp {
font-size: 14px; font-size: 14px;
transform: translateY(-1px); flex-shrink: 0;
} }
@@ -5451,12 +5471,14 @@ html.darkmode .has-thumbnail .related-post-title.clamp {
width: 18px; width: 18px;
transform: translateY(-2px); transform: translateY(-1px);
margin-left: 4px; margin-left: 4px;
margin-right: 1px; margin-right: 1px;
flex-shrink: 0;
} }
.comment-upvote { .comment-upvote {