fix(css): 补齐按钮内标题/内容间距异常的遗漏实例

用户反馈"我的收藏-文件"tab标题(strong)与内容(small)间距过大,根因是全局
`button{line-height:2.2rem}`重置(面向单行居中按钮文案)继承进了改造成
卡片/多行行容器的<button>内部未显式覆盖line-height的<strong>/<small>。

本次除修复用户直接指出的.library-file-card/.library-record-header外,
系统排查全项目同类模式(button内嵌套strong+small),额外修复3处此前遗漏:
- .library-message-results(查找聊天记录-聊天记录tab搜索结果)
- .personal-identity("我"页头像+昵称+企业名身份卡片)
- .report-cards > button(月报列表行,日报列表用article非button故不受影响)

均已在浏览器实测line-height从2.2rem降至1.3,视觉间距恢复正常。
This commit is contained in:
Your Name
2026-09-06 10:40:40 +08:00
parent 150db2fc02
commit 01325ad009
2 changed files with 34 additions and 1 deletions
+33
View File
@@ -1188,6 +1188,14 @@
min-width: 0;
}
/* Same class of bug as .library-file-card above: this row is a <button> (月报列表), and the global
`button{line-height:2.2rem}` reset inherits into the stacked 月份/摘要 <strong>/<small> lines --
the article>header variant just below doesn't need this, it's a plain <article>, not a <button>. */
.report-cards > button strong,
.report-cards > button small {
line-height: 1.3;
}
.report-cards > button small {
margin-top: 0.25rem;
color: #858d97;
@@ -11067,6 +11075,13 @@ div.toast.show {
display: flex;
min-width: 0;
flex-direction: column;
/* .library-file-card is a <button>, and the global `button{line-height:2.2rem}` reset (meant for
a single line of centered action-button text) inherits straight down into this <strong>/<small>
pair -- getComputedStyle confirmed the <strong> line box is 29.33px tall for 14px text, so its
own bottom edge sits ~15px below the actual glyphs even before <small>'s 0.3rem margin-top,
making the gap between filename and size look much bigger than that nominal margin. Reset once
here so both children (which don't set their own line-height) inherit something sane instead. */
line-height: 1.3;
}
.library-file-card strong {
@@ -11657,6 +11672,14 @@ div.toast.show {
background: #dcecff;
}
/* Same class of bug as .library-file-card/.library-record-header above: this is a <button> and
the global `button{line-height:2.2rem}` reset inherits into the sender-name <strong> and date
<small>, inflating the gap around the search-result snippet in between. */
.library-message-results strong,
.library-message-results small {
line-height: 1.3;
}
.library-message-results small {
color: #969da5;
}
@@ -11683,6 +11706,11 @@ div.toast.show {
background: transparent;
text-align: left;
text-transform: none;
/* Same fix as .library-file-card > div above: this is used as both a plain <div> and a <button>
(see the comment on the JSX call sites) -- only the <button> usage inherits the global
`button{line-height:2.2rem}` reset, so without resetting it here the two usages render this
row at two different heights/vertical rhythms depending on which element it happens to be. */
line-height: 1.3;
}
.library-record-header strong {
@@ -13031,10 +13059,14 @@ div.toast.show {
min-width: 0;
}
/* Same class of bug as .library-file-card above: .personal-identity is a <button> (头像+昵称+企业名
身份卡片, "我的" 页首屏第一眼看到的内容), and the global `button{line-height:2.2rem}` reset
inherits into these three stacked lines, inflating the gaps between nickname/企业名/ID. */
.personal-identity strong {
margin-bottom: 0.35rem;
overflow: hidden;
font-size: 1.25rem;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -13042,6 +13074,7 @@ div.toast.show {
.personal-identity small {
margin-top: 0.15rem;
color: #8a919a;
line-height: 1.3;
}
.personal-menu-row {