fix: prompt dialog scroll

[zerob13]

Summary by CodeRabbit

• Style
  • Refined System Prompt and Add/Edit System Prompt dialogs with consistent scrollable areas for smoother navigation.
  • Improved padding and spacing for clearer content layout and readability.
  • Headers remain fixed while content scrolls, reducing jitter and preventing overflow issues.
  • Better handling on smaller screens to avoid clipped fields and improve accessibility.

[coderabbitai]

Walkthrough

Replaced overflow-y-auto divs with ScrollArea components in PromptSetting dialogs. Updated SheetContent to overflow-hidden and headers to shrink-0. Reorganized padded containers for name and content fields while preserving v-model bindings and form behavior. No changes to data handling or exported APIs.

Changes

Cohort / File(s)	Summary
UI scroll/container refactor src/renderer/settings/components/PromptSetting.vue	Swapped div-based scrolling for ScrollArea in system prompt and add/edit dialogs; added overflow-hidden and shrink-0 on SheetContent/Header; restructured padded content wrappers for fields; bindings and logic unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I hopped through sheets and scrolls today,
Tidied paddings, tucked overflow away.
Fields still whisper names the same—
Just smoother lanes in the UI game.
With gentle wheels the prompts now glide,
A bunny’s polish on the scrolling ride. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly summarizes the main change by indicating a fix for prompt dialog scrolling issues. It uses concise phrasing and follows the conventional commit style, making it easy to understand at a glance. The description directly aligns with the updates to the PromptSetting UI where ScrollArea components were introduced to resolve overflow and scrolling behaviors.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch bugfix/prompt-dialog-scroll

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cbfea55 and 68c0da4.

📒 Files selected for processing (1)

• src/renderer/settings/components/PromptSetting.vue (4 hunks)

🧰 Additional context used

📓 Path-based instructions (8)

src/renderer/**/*.{vue,ts,js,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

渲染进程代码放在 src/renderer

Files:

• src/renderer/settings/components/PromptSetting.vue

src/renderer/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.

Files:

• src/renderer/settings/components/PromptSetting.vue

src/renderer/**/*.{vue,ts}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

Implement lazy loading for routes and components.

Files:

• src/renderer/settings/components/PromptSetting.vue

src/renderer/**/*.{ts,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.

Use Pinia for frontend state management (do not introduce alternative state libraries)

Files:

• src/renderer/settings/components/PromptSetting.vue

**/*.{ts,tsx,js,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use English for all logs and comments

Files:

• src/renderer/settings/components/PromptSetting.vue

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Enable and adhere to strict TypeScript typing (avoid implicit any, prefer precise types)

Files:

• src/renderer/settings/components/PromptSetting.vue

**/*.{js,jsx,ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

Apply Prettier formatting: single quotes, no semicolons, max width 100

Files:

• src/renderer/settings/components/PromptSetting.vue

src/renderer/**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

Name Vue components in PascalCase (e.g., ChatInput.vue)

Files:

• src/renderer/settings/components/PromptSetting.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build-check (x64)

🔇 Additional comments (2)

src/renderer/settings/components/PromptSetting.vue (2)

279-328: LGTM! Scroll fix implementation is correct.

The changes properly implement the scroll fix for the system prompt dialog:

• overflow-hidden on SheetContent prevents unintended body scroll
• shrink-0 on SheetHeader keeps the header fixed during content overflow
• ScrollArea wraps the form content with appropriate padding
• All v-model bindings and form structure are preserved

---

355-623: LGTM! Consistent scroll fix implementation.

The add/edit prompt dialog follows the same pattern as the system prompt dialog:

• Proper use of overflow-hidden and shrink-0 classes
• ScrollArea correctly wraps all form sections
• Complex multi-section form structure is preserved
• All data bindings remain intact

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}