Repository navigation
fix(mobile): use :global() for teleported el-dialog overrides - #15
Merged
1firecracker merged 1 commit intoMay 10, 2026
Conversation
The :deep() approach in PR 1firecracker#14 didn't match because el-dialog teleports to body, breaking Vue's scoped data-v inheritance, so the mobile overrides were silently inactive on phone-sized viewports. Switch to :global() inside scoped style, matching the existing pattern in ChatView.vue and MindMapViewer.vue.
There was a problem hiding this comment.
Pull request overview
Fixes a mobile regression where the LLM settings <el-dialog> (teleported to body) stopped receiving scoped-style overrides after PR #14, by switching the affected selectors to Vue’s :global() so they match Element Plus’ generated dialog DOM.
Changes:
- Replace
:deep()-based dialog override selectors with:global()equivalents for.settings-llm-dialogand related.el-form-item*rules. - Keep all overrides constrained to
@media (max-width: 768px)to avoid desktop impact.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景
PR #14 (commit caea265 "refactor: use :deep() in scoped style") 引入了一个回归 bug：
LLM 配置弹窗的移动端样式在手机尺寸下不生效，弹窗仍然按 800px 渲染、表单 label 仍然横向占 120px,导致 Android 上无法正常填表。
根本原因
<el-dialog>通过<teleport to="body">渲染到<body>之外，Vue 的 scopeddata-v-xxx属性无法传递到深层的.el-dialog元素。因此 PR #14 中的.settings-llm-dialog :deep(...)选择器，外层.settings-llm-dialog拿不到 scoped 属性,选择器整体不匹配，CSS 规则失效。改动
将 4 条选择器从
:deep()改为:global()：.settings-llm-dialog→:global(.settings-llm-dialog).settings-llm-dialog :deep(.el-form-item)→:global(.settings-llm-dialog .el-form-item).settings-llm-dialog :deep(.el-form-item__label)→:global(.settings-llm-dialog .el-form-item__label).settings-llm-dialog :deep(.el-form-item__content)→:global(.settings-llm-dialog .el-form-item__content):global()在<style scoped>内显式声明全局规则,正是 Vue 提供的"在 scoped 块中精确开洞"的机制。这一写法在仓库中已有先例:frontend/src/modules/chat/ChatView.vue:3824(.cheatsheet-dialog)frontend/src/modules/mindmap/components/MindMapViewer.vue:1076(.mindmap-fullscreen-dialog)验证
@media (max-width: 768px)内,桌面端零影响