修复移动端语音通话胶囊被撑成方块、来电页认证徽章在长姓名截断时完全不可见
- #video-container.minimized 的移动端媒体查询规则(宽度100%/高度11rem/方角,本是给视频悬浮窗 修的)和 #video-container.audio-minimized(语音胶囊自己的auto/auto/无阴影)特异度相同 (1,1,0),前者写在文件更后面、源码顺序上赢了——语音通话点最小化后,移动端下胶囊被强行撑成 贯穿屏幕顶部的方形透明条,胶囊本体和还原按钮挤在左上角。补 :not(.audio-minimized) 排除。 - 来电全屏页认证徽章原来和姓名文字共用同一个 white-space:nowrap+ellipsis 的<h1>,姓名够长 触发省略号时,排在姓名后面的徽章(同一行内容里靠后的部分)跟着一起被截断出可视区域之外—— 不是"字体显示不全",是整个徽章都看不见。改成flex布局:姓名单独一个可截断的flex子项, 徽章作为flex:none的兄弟节点,不参与省略号裁切,姓名截多短徽章都能跟在后面。 均已用真实DOM结构/getComputedStyle确认修复生效。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
d573b38d10
commit
7db687602b
+20
-2
@@ -11934,16 +11934,31 @@ div.toast.show {
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Name + trusted badge used to share one nowrap/ellipsis box -- when the name alone was long
|
||||||
|
enough to need truncating, the badge (last in source order) got truncated away with it,
|
||||||
|
entirely outside the visible area instead of just following a shortened name. Name now
|
||||||
|
truncates in its own flex child; the badge is a non-shrinking sibling so it always stays
|
||||||
|
on-screen right after whatever of the name fit. */
|
||||||
.call-peer-card h1 {
|
.call-peer-card h1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
margin: 1.3rem 0 0.45rem;
|
margin: 1.3rem 0 0.45rem;
|
||||||
|
max-width: 100%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 1.55rem;
|
font-size: 1.55rem;
|
||||||
max-width: 100%;
|
}
|
||||||
|
|
||||||
|
.call-peer-card h1 > span {
|
||||||
|
min-width: 0;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.call-peer-card h1 .trusted-badge {
|
||||||
|
flex: none;
|
||||||
|
}
|
||||||
|
|
||||||
.call-peer-card p {
|
.call-peer-card p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgba(255,255,255,0.78);
|
color: rgba(255,255,255,0.78);
|
||||||
@@ -12694,7 +12709,10 @@ div.toast.show {
|
|||||||
width: unset;
|
width: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
#video-container.minimized {
|
/* :not(.audio-minimized) -- same specificity (1,1,0) as #video-container.audio-minimized (4149
|
||||||
|
above), and this rule comes later in the file so it was winning even for a voice call's pill,
|
||||||
|
stretching it into the same full-width box meant for the video floating window. */
|
||||||
|
#video-container.minimized:not(.audio-minimized) {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: auto;
|
right: auto;
|
||||||
|
|||||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -133,7 +133,7 @@ export default class CallIncoming extends React.Component {
|
|||||||
topic={this.props.topic}
|
topic={this.props.topic}
|
||||||
title={this.state.fullName} />
|
title={this.state.fullName} />
|
||||||
</div>
|
</div>
|
||||||
<h1>{truncateString(this.state.fullName, MAX_PEER_TITLE_LENGTH)}
|
<h1><span>{truncateString(this.state.fullName, MAX_PEER_TITLE_LENGTH)}</span>
|
||||||
<BadgeList short={true} trustedBadges={this.state.trustedBadges} /></h1>
|
<BadgeList short={true} trustedBadges={this.state.trustedBadges} /></h1>
|
||||||
<p>{isAudioOnly ? '对方邀请你语音通话...' : '对方邀请你视频通话...'}</p>
|
<p>{isAudioOnly ? '对方邀请你语音通话...' : '对方邀请你视频通话...'}</p>
|
||||||
{ringing && <span className="call-ringing-dots"><i /><i /><i /></span>}
|
{ringing && <span className="call-ringing-dots"><i /><i /><i /></span>}
|
||||||
|
|||||||
+3
-1
@@ -23500,7 +23500,9 @@ class CallIncoming extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
|
|||||||
title: this.state.fullName
|
title: this.state.fullName
|
||||||
}, void 0, false)
|
}, void 0, false)
|
||||||
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("h1", {
|
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("h1", {
|
||||||
children: [(0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_6__.truncateString)(this.state.fullName, _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_PEER_TITLE_LENGTH), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)(_badge_list_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
|
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("span", {
|
||||||
|
children: (0,_lib_strformat_js__WEBPACK_IMPORTED_MODULE_6__.truncateString)(this.state.fullName, _config_js__WEBPACK_IMPORTED_MODULE_3__.MAX_PEER_TITLE_LENGTH)
|
||||||
|
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)(_badge_list_jsx__WEBPACK_IMPORTED_MODULE_1__["default"], {
|
||||||
short: true,
|
short: true,
|
||||||
trustedBadges: this.state.trustedBadges
|
trustedBadges: this.state.trustedBadges
|
||||||
}, void 0, false)]
|
}, void 0, false)]
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user