fix(ui): make update dialog scrollable #1257
Conversation
📝 WalkthroughWalkthroughThis PR updates the UpdateDialog.vue component to improve handling of release notes content overflow. It introduces a scrollable release notes area with height constraints using ScrollArea, adds flex-based sizing to dialog structural elements, and replaces the DialogDescription structure with a flex-optimized container to support proper text shrinking and overflow behavior. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom Pre-merge Checks in the settings. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @src/renderer/src/components/ui/UpdateDialog.vue:
- Around line 6-7: Replace the misuse of the DialogDescription wrapper in
UpdateDialog.vue: change the outer DialogDescription element (the one with class
"flex-1 min-h-0" that currently wraps the complex layout) to a plain <div> with
the same layout classes, and reserve DialogDescription for actual descriptive
text elements only (move any human-facing description text into a dedicated
DialogDescription node inside that div); ensure you copy or adjust padding
(e.g., px-6) to maintain visual spacing and keep accessibility semantics intact
for screen readers.
- Around line 3-4: In UpdateDialog.vue replace the Chinese inline comment <!--
显示下载进度 --> with the English equivalent <!-- Display download progress --> so all
comments comply with the English-only guideline; update the comment located near
the dialog content/layout (within the <DialogContent> / <DialogHeader> block) to
preserve meaning and positioning.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/renderer/src/components/ui/UpdateDialog.vue
🧰 Additional context used
📓 Path-based instructions (9)
src/renderer/**/*.vue
📄 CodeRabbit inference engine (CLAUDE.md)
src/renderer/**/*.vue: Use Vue 3 Composition API for all components
Use Tailwind CSS for styling with scoped styles
All user-facing strings must use i18n keys via vue-i18n
Files:
src/renderer/src/components/ui/UpdateDialog.vue
src/renderer/src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
usePresenter.tscomposable for renderer-to-main IPC communication via direct presenter method callsEnsure all code comments are in English and all log messages are in English, with no non-English text in code comments or console statements
Use VueUse composables for common utilities like
useLocalStorage,useClipboard,useDebounceFnVue 3 renderer app code should be organized in
src/renderer/srcwith subdirectories forcomponents/,stores/,views/,i18n/, andlib/
Files:
src/renderer/src/components/ui/UpdateDialog.vue
**/*.{js,ts,tsx,jsx,vue,mjs,cjs}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
All logs and comments must be in English
Files:
src/renderer/src/components/ui/UpdateDialog.vue
**/*.{js,ts,tsx,jsx,vue,json,mjs,cjs}
📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)
Use Prettier as the code formatter
Files:
src/renderer/src/components/ui/UpdateDialog.vue
src/renderer/src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
src/renderer/src/**/*.{vue,ts,tsx}: Use vue-i18n framework for internationalization located at src/renderer/src/i18n/
All user-facing strings must use i18n keys, not hardcoded text
src/renderer/src/**/*.{vue,ts,tsx}: Usereffor primitives and references,reactivefor objects in Vue 3 Composition API
Prefercomputedproperties over methods for derived state in Vue components
Import Shadcn Vue components from@/shadcn/components/ui/path alias
Use thecn()utility function combining clsx and tailwind-merge for dynamic Tailwind classes
UsedefineAsyncComponent()for lazy loading heavy Vue components
Use TypeScript for all Vue components and composables with explicit type annotations
Define TypeScript interfaces for Vue component props and data structures
UseusePresentercomposable for main process communication instead of direct IPC calls
Files:
src/renderer/src/components/ui/UpdateDialog.vue
src/renderer/src/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)
Import useI18n from vue-i18n in Vue components to access translation functions t and locale
src/renderer/src/**/*.vue: Use<script setup>syntax for concise Vue 3 component definitions with Composition API
Define props and emits explicitly in Vue components usingdefinePropsanddefineEmitswith TypeScript interfaces
Useprovide/injectfor dependency injection in Vue components instead of prop drilling
Use Tailwind CSS for all styling instead of writing scoped CSS files
Use mobile-first responsive design approach with Tailwind breakpoints
Use Iconify Vue with lucide icons as primary choice, following patternlucide:{icon-name}
Usev-memodirective for memoizing expensive computations in templates
Usev-oncedirective for rendering static content without reactivity updates
Use virtual scrolling withRecycleScrollercomponent for rendering long lists
Subscribe to events usingrendererEvents.on()and unsubscribe inonUnmountedlifecycle hook
Files:
src/renderer/src/components/ui/UpdateDialog.vue
src/renderer/src/components/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/vue-stack-guide.mdc)
Name Vue components using PascalCase (e.g.,
ChatInput.vue,MessageItemUser.vue)
Files:
src/renderer/src/components/ui/UpdateDialog.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
Vue components must be named in PascalCase (e.g.,
ChatInput.vue) and use Vue 3 Composition API with Pinia for state management and Tailwind for styling
Files:
src/renderer/src/components/ui/UpdateDialog.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Use camelCase for variable and function names; use PascalCase for types and classes; use SCREAMING_SNAKE_CASE for constants
Configure Prettier with single quotes, no semicolons, and line width of 100 characters. Runpnpm run formatafter completing features
Files:
src/renderer/src/components/ui/UpdateDialog.vue
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-05T02:41:45.204Z
Learning: PRs must include clear description, link related issues with `Closes #123`, include screenshots/GIFs for UI changes with BEFORE/AFTER ASCII layout blocks, pass lint/typecheck/tests, and keep changes focused
📚 Learning: 2026-01-05T02:41:31.619Z
Learnt from: CR
Repo: ThinkInAIXYZ/deepchat PR: 0
File: .cursor/rules/vue-stack-guide.mdc:0-0
Timestamp: 2026-01-05T02:41:31.619Z
Learning: Applies to src/renderer/src/**/*.{vue,ts,tsx} : Import Shadcn Vue components from `@/shadcn/components/ui/` path alias
Applied to files:
src/renderer/src/components/ui/UpdateDialog.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/src/components/ui/UpdateDialog.vue (2)
12-16: LGTM! Proper implementation of scrollable release notes.The
ScrollAreacomponent is correctly used to make release notes scrollable with appropriate height constraints and padding for the scrollbar. Thewhitespace-pre-lineclass preserves formatting of the release notes content, and themax-h-[50dvh]provides a reasonable viewport-relative height limit.
69-69: LGTM! Correct import path for Shadcn component.The
ScrollAreaimport follows the project's established pattern for Shadcn UI components as per coding guidelines.
| <DialogContent class="max-h-[85dvh] sm:max-w-[720px] flex flex-col overflow-hidden"> | ||
| <DialogHeader class="shrink-0"> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's examine the UpdateDialog.vue file
cat -n src/renderer/src/components/ui/UpdateDialog.vue | head -100Repository: ThinkInAIXYZ/deepchat
Length of output: 4674
🏁 Script executed:
# Search for viewport height usages in Vue components
rg -n "(?:max-|min-)?h-\[[\d.]+(?:d?vh|svh|lvh)\]" -t vue -C 2Repository: ThinkInAIXYZ/deepchat
Length of output: 92
🏁 Script executed:
# Search for viewport height usages in all Vue files
rg "(?:max-|min-)?h-\[[\d.]+(?:d?vh|svh|lvh)\]" --type-list | grep -i vueRepository: ThinkInAIXYZ/deepchat
Length of output: 454
🏁 Script executed:
# Use a broader search for vh/dvh usages
rg "(?:h-|max-h-|min-h-)\[.*?(?:vh|dvh|svh|lvh)" -g "*.vue" -A 1 -B 1Repository: ThinkInAIXYZ/deepchat
Length of output: 5142
🏁 Script executed:
# Check the actual semantic structure - verify DialogDescription usage in Shadcn Vue
fd "dialog" --type f -e vue -e ts -e tsx | head -20Repository: ThinkInAIXYZ/deepchat
Length of output: 1164
🏁 Script executed:
# Look for how DialogDescription is used elsewhere in the codebase
rg "DialogDescription" -g "*.vue" -B 2 -A 2Repository: ThinkInAIXYZ/deepchat
Length of output: 50377
🏁 Script executed:
# Verify the Chinese comment on line 17
sed -n '17p' src/renderer/src/components/ui/UpdateDialog.vueRepository: ThinkInAIXYZ/deepchat
Length of output: 94
Replace Chinese comment with English equivalent on line 17.
The layout structure with max-h-[85dvh] and max-h-[50dvh] is correct and responsive across screen sizes. However, line 17 contains a Chinese comment (<!-- 显示下载进度 -->) which violates the coding guideline requiring all comments to be in English. Replace with <!-- Display download progress -->.
🤖 Prompt for AI Agents
In @src/renderer/src/components/ui/UpdateDialog.vue around lines 3 - 4, In
UpdateDialog.vue replace the Chinese inline comment <!-- 显示下载进度 --> with the
English equivalent <!-- Display download progress --> so all comments comply
with the English-only guideline; update the comment located near the dialog
content/layout (within the <DialogContent> / <DialogHeader> block) to preserve
meaning and positioning.
| <DialogDescription class="flex-1 min-h-0"> | ||
| <div class="flex min-h-0 flex-col space-y-2"> |
There was a problem hiding this comment.
Refactor to avoid semantic misuse of DialogDescription.
The DialogDescription component is intended for descriptive text content, not as a flex layout container. Using it with flex-1 min-h-0 and wrapping complex layout structures inside it misuses its semantic purpose, which can:
- Confuse screen readers that expect description text
- Create maintenance issues as developers expect
DialogDescriptionto contain text - Break if future Shadcn UI updates add conflicting styles
Consider using a plain <div> for the layout container instead.
🔎 Proposed refactor to use semantic structure
<DialogHeader class="shrink-0">
<DialogTitle>{{ t(upgrade.hasUpdate ? 'update.newVersion' : 'update.alreadyUpToDate') }}</DialogTitle>
- <DialogDescription class="flex-1 min-h-0">
- <div class="flex min-h-0 flex-col space-y-2">
+ </DialogHeader>
+ <div class="flex-1 min-h-0 flex flex-col space-y-2 px-6">
<template v-if="upgrade.hasUpdate">
<p>{{ t('update.version') }}: {{ upgrade.updateInfo?.version }}</p>
<p>{{ t('update.releaseDate') }}: {{ upgrade.updateInfo?.releaseDate }}</p>
<p>{{ t('update.releaseNotes') }}:</p>
<ScrollArea class="max-h-[50dvh] pr-3">
<div class="whitespace-pre-line">
<NodeRenderer :isDark="themeStore.isDark" :content="upgrade.updateInfo?.releaseNotes"></NodeRenderer>
</div>
</ScrollArea>
<!-- 显示下载进度 -->
<div v-if="upgrade.isDownloading && upgrade.updateProgress" class="mt-4">
<p class="mb-2">
{{ t('update.downloading') }}: {{ Math.round(upgrade.updateProgress.percent) }}%
</p>
<progress class="w-full" :value="upgrade.updateProgress.percent" max="100"></progress>
<p class="text-xs mt-1">
{{ formatSize(upgrade.updateProgress.transferred) }} /
{{ formatSize(upgrade.updateProgress.total) }}
({{ formatSpeed(upgrade.updateProgress.bytesPerSecond) }})
</p>
</div>
</template>
<p class="mt-4" v-else-if="!upgrade.isSilent && !upgrade.hasUpdate">{{ t('update.alreadyUpToDateDesc') }} 🎉🎉🎉</p>
- </div>
- </DialogDescription>
- </DialogHeader>
+ </div>
<DialogFooter>Note: You may need to adjust the px-6 padding to match the default padding that DialogDescription provides.
🤖 Prompt for AI Agents
In @src/renderer/src/components/ui/UpdateDialog.vue around lines 6 - 7, Replace
the misuse of the DialogDescription wrapper in UpdateDialog.vue: change the
outer DialogDescription element (the one with class "flex-1 min-h-0" that
currently wraps the complex layout) to a plain <div> with the same layout
classes, and reserve DialogDescription for actual descriptive text elements only
(move any human-facing description text into a dedicated DialogDescription node
inside that div); ensure you copy or adjust padding (e.g., px-6) to maintain
visual spacing and keep accessibility semantics intact for screen readers.
Summary
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.