Skip to content

fix(ui): make update dialog scrollable #1257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zerob13 merged 1 commit into from
Jan 7, 2026
Merged

fix(ui): make update dialog scrollable #1257

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 10 additions & 7 deletions src/renderer/src/components/ui/UpdateDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
<template>
<Dialog :open="upgrade.showUpdateDialog" @update:open="upgrade.closeUpdateDialog">
<DialogContent>
<DialogHeader>
<DialogContent class="max-h-[85dvh] sm:max-w-[720px] flex flex-col overflow-hidden">
<DialogHeader class="shrink-0">
Comment on lines +3 to +4
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, let's examine the UpdateDialog.vue file
cat -n src/renderer/src/components/ui/UpdateDialog.vue | head -100

Repository: 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 2

Repository: 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 vue

Repository: 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 1

Repository: 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 -20

Repository: 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 2

Repository: ThinkInAIXYZ/deepchat

Length of output: 50377

🏁 Script executed:

# Verify the Chinese comment on line 17
sed -n '17p' src/renderer/src/components/ui/UpdateDialog.vue

Repository: 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.

<DialogTitle>{{ t(upgrade.hasUpdate ? 'update.newVersion' : 'update.alreadyUpToDate') }}</DialogTitle>
<DialogDescription>
<div class="space-y-2">
<DialogDescription class="flex-1 min-h-0">
<div class="flex min-h-0 flex-col space-y-2">
Comment on lines +6 to +7
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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 DialogDescription to 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.

<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>
<p class="whitespace-pre-line">
<NodeRenderer :isDark="themeStore.isDark" :content="upgrade.updateInfo?.releaseNotes"></NodeRenderer>
</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">
Expand Down Expand Up @@ -64,6 +66,7 @@ import {
DialogHeader,
DialogTitle
} from '@shadcn/components/ui/dialog'
import { ScrollArea } from '@shadcn/components/ui/scroll-area'
import { useUpgradeStore } from '@/stores/upgrade'
import NodeRenderer from 'markstream-vue'
import { useThemeStore } from '@/stores/theme'
Expand Down