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:
@@ -1188,6 +1188,14 @@
|
|||||||
min-width: 0;
|
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 {
|
.report-cards > button small {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.25rem;
|
||||||
color: #858d97;
|
color: #858d97;
|
||||||
@@ -11067,6 +11075,13 @@ div.toast.show {
|
|||||||
display: flex;
|
display: flex;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
flex-direction: column;
|
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 {
|
.library-file-card strong {
|
||||||
@@ -11657,6 +11672,14 @@ div.toast.show {
|
|||||||
background: #dcecff;
|
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 {
|
.library-message-results small {
|
||||||
color: #969da5;
|
color: #969da5;
|
||||||
}
|
}
|
||||||
@@ -11683,6 +11706,11 @@ div.toast.show {
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
text-transform: none;
|
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 {
|
.library-record-header strong {
|
||||||
@@ -13031,10 +13059,14 @@ div.toast.show {
|
|||||||
min-width: 0;
|
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 {
|
.personal-identity strong {
|
||||||
margin-bottom: 0.35rem;
|
margin-bottom: 0.35rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.3;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
@@ -13042,6 +13074,7 @@ div.toast.show {
|
|||||||
.personal-identity small {
|
.personal-identity small {
|
||||||
margin-top: 0.15rem;
|
margin-top: 0.15rem;
|
||||||
color: #8a919a;
|
color: #8a919a;
|
||||||
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.personal-menu-row {
|
.personal-menu-row {
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user