fix(dashboard): add mobile adaptation for persona selection interface#5907
fix(dashboard): add mobile adaptation for persona selection interface#5907letr007 wants to merge 1 commit intoAstrBotDevs:masterfrom
Conversation
dosubot
bot
added
the
size:M
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求旨在增强仪表盘中人格选择界面的移动端适配性。通过调整对话框的宽度逻辑、优化内容区域的滚动行为以及引入专门的移动端导航元素，确保了在小屏幕设备上，用户能够流畅地选择人格，避免了界面元素溢出和操作不便的问题，显著提升了移动端的用户体验。 Highlights
Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - 我发现了 1 个问题，并留下了一些整体性的反馈：
- selector 内容仍然使用了硬编码的高度（例如 600px、80vh、76vh）；建议仅依赖响应式的最大高度（max-height）和元素自身尺寸，从而避免在某些边缘视口尺寸或横屏手机上出现尴尬的裁切效果。
- 你在混用 Vuetify 的
smAndDown断点逻辑和原生的@media (max-width: 960px)媒体查询；为了在断点发生变化时避免出现细微的布局不一致，可能更可维护的做法是让所有响应式行为都基于同一个断点来源来派生。
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The selector content still uses hard-coded heights (e.g. 600px, 80vh, 76vh); consider relying solely on responsive max-heights and intrinsic sizing to avoid awkward clipping on edge-case viewport sizes or landscape mobile.
- You’re mixing Vuetify’s `smAndDown` breakpoint logic with a raw `@media (max-width: 960px)` query; it might be more maintainable to derive all responsive behavior from the same breakpoint source to avoid subtle layout mismatches if breakpoints change.
## Individual Comments
### Comment 1
<location path="dashboard/src/components/folder/BaseFolderItemSelector.vue" line_range="266-267" />
<code_context>
};
},
computed: {
+ isCompactLayout(): boolean {
+ return this.$vuetify.display.smAndDown;
+ },
+
</code_context>
<issue_to_address>
**issue (bug_risk):** Align the JS `isCompactLayout` breakpoint with the CSS media query to avoid inconsistent layouts.
`isCompactLayout` uses `this.$vuetify.display.smAndDown` (~600px), but the CSS compact styles start at `@media (max-width: 960px)`. Between 600–960px, compact CSS applies while `isCompactLayout` is `false`, so the template still renders the desktop variant. Please align the breakpoint (e.g. use `mdAndDown` or change the media query to 600px) so template logic and styles stay in sync.
</issue_to_address>帮我变得更有用！请在每条评论上点击 👍 或 👎，我会根据你的反馈改进后续评审。
Original comment in English
Hey - I've found 1 issue, and left some high level feedback:
- The selector content still uses hard-coded heights (e.g. 600px, 80vh, 76vh); consider relying solely on responsive max-heights and intrinsic sizing to avoid awkward clipping on edge-case viewport sizes or landscape mobile.
- You’re mixing Vuetify’s
smAndDownbreakpoint logic with a raw@media (max-width: 960px)query; it might be more maintainable to derive all responsive behavior from the same breakpoint source to avoid subtle layout mismatches if breakpoints change.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The selector content still uses hard-coded heights (e.g. 600px, 80vh, 76vh); consider relying solely on responsive max-heights and intrinsic sizing to avoid awkward clipping on edge-case viewport sizes or landscape mobile.
- You’re mixing Vuetify’s `smAndDown` breakpoint logic with a raw `@media (max-width: 960px)` query; it might be more maintainable to derive all responsive behavior from the same breakpoint source to avoid subtle layout mismatches if breakpoints change.
## Individual Comments
### Comment 1
<location path="dashboard/src/components/folder/BaseFolderItemSelector.vue" line_range="266-267" />
<code_context>
};
},
computed: {
+ isCompactLayout(): boolean {
+ return this.$vuetify.display.smAndDown;
+ },
+
</code_context>
<issue_to_address>
**issue (bug_risk):** Align the JS `isCompactLayout` breakpoint with the CSS media query to avoid inconsistent layouts.
`isCompactLayout` uses `this.$vuetify.display.smAndDown` (~600px), but the CSS compact styles start at `@media (max-width: 960px)`. Between 600–960px, compact CSS applies while `isCompactLayout` is `false`, so the template still renders the desktop variant. Please align the breakpoint (e.g. use `mdAndDown` or change the media query to 600px) so template logic and styles stay in sync.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
dosubot
bot
added
area:webui
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
|
感谢 Sourcery 的整体建议。关于固定高度（600px/80vh/76vh）这一点，我们认可其优化价值，但当前实现用于保证列表滚动和底部操作区可达，且本次优先处理已复现的移动端超宽问题。后续我们会单独评估进一步弱化固定高度、改为更纯粹的自适应高度策略。 |
1 participant
Modifications / 改动点
仅修改
dashboard/src/components/folder/BaseFolderItemSelector.vue，解决“配置 -> 默认人格 -> 选择人格”弹窗在移动端超宽的问题。对话框宽度改为小屏自适应：小屏限制
max-width，并取消小屏下固定min-width=800px，避免横向溢出。将内容区内联高度样式提取为类并补充小屏滚动约束，确保内容可浏览且按钮区可操作。
This is NOT a breaking change. / 这不是一个破坏性变更。
Screenshots or Test Results / 运行截图或测试结果
修复前:
修复后:
Checklist / 检查清单
requirements.txt和pyproject.toml文件相应位置。/ I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations inrequirements.txtandpyproject.toml.Summary by Sourcery
改进角色选择对话框的布局，使其在小屏幕上具有响应式表现，并避免出现水平溢出。
Bug Fixes:
Enhancements:
Original summary in English
Summary by Sourcery
Improve the persona selection dialog layout to be responsive on smaller screens and avoid horizontal overflow.
Bug Fixes:
Enhancements: