fix(dashboard): make skill editor dialog responsive on small screens

[mantoujun12]

Important

此 Pull Request 为临时解决方案
如果短期内有重置 Skill 编辑器 的计划，可关闭此 PR
如果不需要中等窗口以下的窗口全屏，可追加 commit 移除 646行 的 :fullscreen="$vuetify.display.mdAndDown"
有什么改进方案均可在此 PR 追加新 commit 或 comment 。或者关闭此 PR 时，可以说明一下不方便改动的原因

Modifications / 改动点

Fixes #9871

本 Pull Request 仅修改了 SkillsSection.vue 并添加了两处内容 (窗口全屏条件 CSS):

• 在 646行 添加了 :fullscreen="$vuetify.display.mdAndDown" ，避免和固定在右下角的两个按钮出现元素重叠
• 在约 2405-2441行 添加了3个选择器

关于3个选择器做了什么

• .skill-editor 编辑器弹窗内文件树/编辑器在窄屏下改成单列布局
• .skill-editor__files 固定为 20vh
• .skill-editor__monaco 固定为 40vh

如果你认为这个固定数值不合理，可以说明一下原因和相对应的解决方法，或者追加 commit 也可以。

• This is NOT a breaking change. / 这不是一个破坏性变更。

Screenshots or Test Results / 运行截图或测试结果

Before / 改动前

由于双列布局的原因，在移动端下，文件夹树占比较大，编辑器几乎不可见。

After / 改动后

在移动端下，改为单列布局，现在用户可以看见编辑器且查看和编辑内容了。并且由于窗口全屏，现在不会和固定在右下角的按钮产生元素重叠。

对于桌面端，小窗口和中等窗口也有效果，但影响不大。

桌面端小窗口

桌面端中等窗口

---

Checklist / 检查清单

• 😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
  / 如果 PR 中有新加入的功能，已经通过 Issue / 邮件等方式和作者讨论过。

• 👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
  / 我的更改经过了良好的测试，并已在上方提供了“验证步骤”和“运行截图”。

• 🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in requirements.txt and pyproject.toml.
  / 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到 requirements.txt 和 pyproject.toml 文件相应位置。

• 😮 My changes do not introduce malicious code.
  / 我的更改没有引入恶意代码。

Summary by Sourcery

Improve the skill editor’s responsive behavior so users can view and edit files reliably on small screens.

Bug Fixes:

• Make the skill editor usable on small screens by switching its file tree and editor to a single-column layout with dedicated vertical space.
• Prevent the responsive skill editor dialog from overlapping fixed bottom-right controls by using fullscreen mode on medium and smaller displays.

Enhancements:

• Improve skill editor dialog scrolling and sizing for narrow viewports.

[sourcery-ai]

Hey - I've found 2 issues

Prompt for AI Agents

Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="dashboard/src/components/extension/SkillsSection.vue" line_range="646" />
<code_context>
     <v-dialog
       v-model="editorDialog.show"
       max-width="1180px"
+      :fullscreen="$vuetify.display.mdAndDown"
       :persistent="editorDialog.saving"
     >
</code_context>
<issue_to_address>
**issue (broader_impact):** On short mobile viewports, the fullscreen dialog still contains `.skill-editor-dialog { max-height: min(88vh, 980px); overflow: hidden; }`, while the editor alone has a `min-height` of `40vh` and the header, file panel, and actions require additional height. The card therefore clips the editor or save/cancel actions instead of providing a usable fullscreen layout.

**Triggers:** When the viewport height is small, such as a phone in landscape or a short mobile browser viewport.

**Suggested fix:** Override the card's max-height and overflow for the fullscreen state, or size the dialog body and its grid rows within the available viewport height instead of using independent `vh` minimums.
</issue_to_address>

### Comment 2
<location path="dashboard/src/components/extension/SkillsSection.vue" line_range="646" />
<code_context>
     <v-dialog
       v-model="editorDialog.show"
       max-width="1180px"
+      :fullscreen="$vuetify.display.mdAndDown"
       :persistent="editorDialog.saving"
     >
</code_context>
<issue_to_address>
**issue:** The dialog switches to fullscreen through Vuetify's `mdAndDown` breakpoint, which is 960px by default, but the single-column editor layout is enabled only at `max-width: 860px`. Between 861px and 959px the dialog is fullscreen while the editor remains a 280px-plus-editor two-column grid, so the narrow layout problem persists at part of the breakpoint range.

**Triggers:** When the viewport width is between 861px and 959px.

**Suggested fix:** Use the same breakpoint as Vuetify's `mdAndDown` behavior, typically `@media (max-width: 960px)`, or change the fullscreen condition to match the CSS breakpoint.
</issue_to_address>

Sourcery assessment

Approval pending. 2 findings to address first.

Blocking findings: dashboard/src/components/extension/SkillsSection.vue:646, dashboard/src/components/extension/SkillsSection.vue:646

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[mantoujun12]

@sourcery-ai review

[sourcery-ai]

Hey - I've found 1 issue

Prompt for AI Agents

Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="dashboard/src/components/extension/SkillsSection.vue" line_range="646" />
<code_context>
     <v-dialog
       v-model="editorDialog.show"
       max-width="1180px"
+      :fullscreen="$vuetify.display.mdAndDown"
       :persistent="editorDialog.saving"
     >
</code_context>
<issue_to_address>
**issue (bug_risk):** The dialog enters fullscreen for Vuetify's `mdAndDown` range (up to 960px), but the stacked layout and overflow override apply only at `max-width: 860px`. Between 861px and 960px, the editor keeps its two-column layout and 560px minimum height while `.skill-editor-dialog` retains `max-height: min(88vh, 980px)` and `overflow: hidden`, so on short tablet or landscape viewports the editor content and save/cancel buttons are clipped and cannot be reached.

**Triggers:** When the viewport width is 861–960px and its height is too short for the base editor layout, such as a tablet or landscape window.

**Suggested fix:** Apply the responsive layout and dialog overflow override at the same breakpoint as `mdAndDown`, or remove the fullscreen behavior from the unmatched 861–960px range.
</issue_to_address>

Sourcery assessment

Approval pending. 1 finding to address first.

Blocking findings: dashboard/src/components/extension/SkillsSection.vue:646

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}