fix(ui): 移动端顶栏留白挪到滚动容器,根治 backdrop-filter 无内容可模糊

- chat-container--mobile 的 padding-top 会把滚动区整体下推(父容器 overflow:hidden),
  fixed 顶栏的三级模糊条带背后只剩纯色背景,移动端模糊失效只剩颜色渐隐层
- 留白改到 .chat-container--mobile .messages-area(52px=44 顶栏+8 间距),
  与桌面端 has-title-ribbon 机制对齐,消息滚动时可进入顶栏背后
- monitor 模式无滚动区,保留容器级留白防面板被顶栏遮盖
- 顺带清理媒体查询外永不生效的 52px 死代码(断点与 isMobileViewport 同源)

Co-authored-by: Astrion powered by Kimi-K3 <astrion-agent@users.noreply.github.com>
This commit is contained in:
JOJO 2026-08-30 10:03:54 +08:00
parent db2c375412
commit 395a9467ec

View File

@ -414,9 +414,24 @@
.chat-container--mobile { .chat-container--mobile {
--chat-rail-fluid: 100%; --chat-rail-fluid: 100%;
/* 顶部留白必须放在滚动容器 .messages-area 见下不能放父容器
父容器 overflow:hidden + padding-top 会把滚动区整体下推fixed 顶栏
.mobile-panel-trigger backdrop-filter 条带背后只剩纯色背景
无消息内容可模糊移动端模糊因此失效只剩颜色渐隐层2026-08-30 实测 */
}
/* 顶栏占位 44px + 原消息区间距 8px滚动容器自身的 padding-top 允许消息
滚动时进入 fixed 顶栏背后区域与桌面端 .has-title-ribbon 同理
三级渐进模糊条带才有内容可模糊 */
.chat-container--mobile .messages-area {
padding-top: 52px; padding-top: 52px;
} }
/* monitor 面板是 flex 文档流子项、无滚动区,保留容器级留白避开 fixed 顶栏 */
.chat-container--mobile.chat-container--monitor {
padding-top: 44px;
}
.chat-container--mobile.chat-container--app-shell { .chat-container--mobile.chat-container--app-shell {
--chat-scrollbar-width: 0px !important; --chat-scrollbar-width: 0px !important;
--chat-message-rail-width: var(--chat-rail-width) !important; --chat-message-rail-width: var(--chat-rail-width) !important;
@ -429,9 +444,8 @@
--composer-reserved-height: var(--composer-base-height); --composer-reserved-height: var(--composer-base-height);
} }
.chat-container--mobile { /* .chat-container--mobile 不再设 padding-top留白已统一挪到滚动容器
padding-top: 44px; .messages-area见上方注释保证顶栏模糊条带背后有可模糊的消息内容 */
}
.messages-area { .messages-area {
padding-top: 8px; padding-top: 8px;