From e604c8ed4c304a51d1743adda0aae259d37a1c57 Mon Sep 17 00:00:00 2001
From: nanhaoluo <3075912108@qq.com>
Date: Mon, 12 Jan 2026 15:07:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=AF=84=E8=AE=BA?=
 =?UTF-8?q?=E5=8C=BA=E7=BB=84=E4=BB=B6=E8=A2=AB=E6=88=AA=E6=96=AD=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整 .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 属性，确保内容不会被截断
---
 style.css | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

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