fix(mobile): 权限菜单自适应位置并优化审批面板样式

- 修复权限切换弹出菜单在移动端跑出屏幕右侧的问题
- 添加媒体查询使菜单自适应左右位置
This commit is contained in:
JOJO 2026-04-12 13:41:15 +08:00
parent dcc6e3588e
commit 3fee0ebf7d

View File

@ -209,6 +209,14 @@
right: 25px;
bottom: -28px;
}
/* 权限菜单在手机端自适应位置,避免跑出屏幕 */
.permission-switcher__menu {
left: auto;
right: 0;
width: min(250px, calc(100vw - 40px));
max-width: 250px;
}
}
.stadium-shell {
@ -768,3 +776,67 @@
opacity: 0;
transform: translateY(6px);
}
/* 手机端审批面板样式 - 与电脑端保持一致 */
.mobile-approval-overlay {
pointer-events: auto;
}
.mobile-approval-overlay .mobile-panel-sheet--approval {
pointer-events: auto;
background: var(--claude-panel);
}
/* 手机端审批面板按钮样式 - 与电脑端一致 */
@media (max-width: 768px) {
.mobile-panel-sheet--approval .approval-btn {
border-radius: 8px;
padding: 8px 14px;
font-size: 13px;
}
.mobile-panel-sheet--approval .approval-btn--approve {
background: var(--claude-accent);
color: #fff;
border-color: var(--claude-accent);
}
.mobile-panel-sheet--approval .approval-btn--reject {
background: transparent;
border-color: var(--theme-control-border-strong);
}
.mobile-panel-sheet--approval .approval-btn--switch {
background: transparent;
border-color: var(--claude-accent);
color: var(--claude-accent);
}
/* 审批卡片样式保持一致 */
.mobile-panel-sheet--approval .approval-card {
border-color: var(--theme-control-border);
background: var(--theme-surface-soft);
}
/* 审批面板样式 - 移除背景色让内容顶头 */
.mobile-panel-sheet--approval .sidebar.right-sidebar {
background: transparent !important;
}
.mobile-panel-sheet--approval .sidebar-header,
.mobile-panel-sheet--approval .sidebar .sidebar-header {
background: transparent !important;
border-color: var(--claude-border);
padding: 0 16px !important;
}
/* 移动端审批面板关闭按钮 - 移除圆形外框 */
.mobile-panel-sheet--approval .approval-close-btn {
background: transparent !important;
border-radius: 0 !important;
width: auto !important;
height: auto !important;
padding: 4px !important;
font-size: 24px !important;
}
}