Repository navigation
fix(mobile): adapt LLM settings dialog and PPT touch-action for Android - #14
Merged
1firecracker merged 2 commits intoApr 30, 2026
Conversation
There was a problem hiding this comment.
Pull request overview
This PR improves the mobile experience on Android by adapting the LLM settings dialog layout for small screens and restoring expected touch interactions (horizontal pan + pinch zoom) in the PPT slide viewer.
Changes:
- Add mobile-specific CSS to prevent
SettingsDialog.vuefrom overflowing on small screens and to reflow form labels/inputs for usability. - Update
SlideViewer.vuemobiletouch-actionto allow horizontal panning and pinch zoom.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/src/components/SettingsDialog.vue | Adds mobile responsive styling for the Element Plus dialog and form layout. |
| frontend/src/modules/documents/components/PPTViewer/SlideViewer.vue | Adjusts mobile touch-action to re-enable pan/zoom gestures on Android. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+275
to
+298
| <style> | ||
| @media (max-width: 768px) { | ||
| .settings-llm-dialog { | ||
| width: 95% !important; | ||
| max-width: 95vw !important; | ||
| margin: 5vh auto !important; | ||
| } | ||
|
|
||
| .settings-llm-dialog .el-form-item { | ||
| display: block; | ||
| margin-bottom: 18px; | ||
| } | ||
| .settings-llm-dialog .el-form-item__label { | ||
| width: auto !important; | ||
| text-align: left; | ||
| padding: 0 0 4px 0; | ||
| line-height: 1.4; | ||
| height: auto; | ||
| float: none; | ||
| } | ||
| .settings-llm-dialog .el-form-item__content { | ||
| margin-left: 0 !important; | ||
| } | ||
| } |
1firecracker
pushed a commit
that referenced
this pull request
May 10, 2026
The :deep() approach in PR #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.
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 针对
android-app分支(commit 5bfc48b "Add Android app mobile adaptation"),修复两个移动端体验问题 。改动
1. LLM 配置弹窗适配小屏（SettingsDialog.vue）
width="800px"在 ≤768px 屏幕溢出 → 用@media覆盖为 95vwel-form-item横向 120px label 把输入框挤到几乎不可用 → 移动端切换为 label 在上、input 在下,输入框占满宽度.provider-headerflex 改纵向堆叠,避免标题和"刷新模型列表"按钮挤压@media (max-width: 768px)实现,桌面端零影响2. PPT 浏览触摸适配(SlideViewer.vue)
touch-action: pan-y禁止了横向滑动和双指缩放 → 改为pan-x pan-y pinch-zoom测试
风险
两处改动都包在
@media (max-width: 768px)块里,桌面端浏览器根本不解析,不影响 web 端行为。!important用于覆盖 Element Plus 内联样式,作用域被.settings-llm-dialogclass 限定。