修复通讯录"新朋友"两处视觉问题：未读红点数字被挤出圆圈、拒绝/通过验证按钮在移动端换行

现象1：新朋友入口的红色未读数徽标（.people-entry-list em）只显示一个纯红点，数字看不见。
现象2：待处理好友申请行的"拒绝"/"通过验证"两个按钮上下堆叠换行，而不是同一行并排。

根因1：全局 button{line-height:2.2rem} 被 <em> 徽标继承，数字所在的匿名行盒远高于
1.2rem 的圆圈本身，place-items:center 只能让整个超高行盒居中，数字被推出圆心、
甚至溢出到按钮白色背景上（白字白底=看起来像空心圆点）。这跟本工程早前那轮全局
line-height 排查是同一类问题（01325ad0），.messages-conversation-meta b 当时已经
用 line-height:1 修过，.people-entry-list em 这条当时漏改了。

根因2：css/base.css 里 @media(max-width:640px) 断点下有一条
.people-request-list article > span, .group-request-list article > span
{flex-direction:column} 的覆盖规则，把默认的横向flex行强制改成纵向堆叠。核对两处
按钮组的实际内容（拒绝/通过验证、拒绝/确定，均为2个短文本按钮）后确认这条覆盖没有
任何布局必要性，纯属误加；因为 im_webapp 主要是移动端场景，这个断点几乎总命中，
所以两个页面的按钮实际上一直都在换行。

修法：给 .people-entry-list em 补上 line-height:1；删除上述@media块里这条多余的
flex-direction:column（连带align-items:flex-start）覆盖规则，让两个列表都退回默认
的横向排列+垂直居中。

验证：本地起dev-proxy，用真实登录账号在通讯录页面注入与真实DOM结构/class名完全
一致的测试节点核对渲染效果——红点数字正确居中显示，两个按钮同一行并排显示，
与预期一致。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

This commit is contained in:

Your Name

2026-09-07 01:30:48 +08:00

co-authored by

Claude Sonnet 5

parent 31f2b4afea

commit 0d32569633

2 changed files with 2 additions and 11 deletions

css/base.min.css

Vendored

+1 -1

View File

File diff suppressed because one or more lines are too long