From 27c26b03ee1ac7428bc6db01a8442110ab65fa41 Mon Sep 17 00:00:00 2001
From: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
Date: Sat, 9 Aug 2025 14:31:49 +0800
Subject: [PATCH 1/2] fix: add scrollable support to PopoverContent to prevent
 overflow

---
 src/renderer/src/components/NewThread.vue        |  2 +-
 src/renderer/src/components/TitleView.vue        |  2 +-
 .../src/components/ui/popover/PopoverContent.vue | 16 ++++++++++++----
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/components/NewThread.vue b/src/renderer/src/components/NewThread.vue
index 5121074a8..8bd07cb85 100644
--- a/src/renderer/src/components/NewThread.vue
+++ b/src/renderer/src/components/NewThread.vue
@@ -78,7 +78,7 @@
                   <Icon icon="lucide:settings-2" class="w-4 h-4" />
                 </Button>
               </PopoverTrigger>
-              <PopoverContent align="start" class="p-0 w-80">
+              <PopoverContent align="start" class="p-0 w-80" :enable-scrollable="true">
                 <ChatConfig
                   v-model:temperature="temperature"
                   v-model:context-length="contextLength"
diff --git a/src/renderer/src/components/TitleView.vue b/src/renderer/src/components/TitleView.vue
index ba27aba6f..1a6f726fc 100644
--- a/src/renderer/src/components/TitleView.vue
+++ b/src/renderer/src/components/TitleView.vue
@@ -49,7 +49,7 @@
             <Icon icon="lucide:settings-2" class="w-4 h-4" />
           </Button>
         </PopoverTrigger>
-        <PopoverContent align="end" class="p-0 w-80">
+        <PopoverContent align="end" class="p-0 w-80" :enable-scrollable="true">
           <ChatConfig
             v-model:system-prompt="systemPrompt"
             :temperature="temperature"
diff --git a/src/renderer/src/components/ui/popover/PopoverContent.vue b/src/renderer/src/components/ui/popover/PopoverContent.vue
index 10ae0adde..e0d99fa72 100644
--- a/src/renderer/src/components/ui/popover/PopoverContent.vue
+++ b/src/renderer/src/components/ui/popover/PopoverContent.vue
@@ -10,16 +10,20 @@ defineOptions({
 })
 
 const props = withDefaults(
-  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<PopoverContentProps & {
+    class?: HTMLAttributes['class']
+    enableScrollable?: boolean
+  }>(),
   {
     align: 'center',
-    sideOffset: 4
+    sideOffset: 4,
+    enableScrollable: false
   }
 )
 const emits = defineEmits<PopoverContentEmits>()
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, enableScrollable: __, ...delegated } = props
 
   return delegated
 })
@@ -34,11 +38,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       :class="
         cn(
           'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.enableScrollable && 'max-h-96 overflow-hidden',
           props.class
         )
       "
     >
-      <slot />
+      <div v-if="props.enableScrollable" class="max-h-96 overflow-y-auto">
+        <slot />
+      </div>
+      <slot v-else />
     </PopoverContent>
   </PopoverPortal>
 </template>

From 45b16610a452a7bbbce7c55d70a531d5ee913cd9 Mon Sep 17 00:00:00 2001
From: yyhhyyyyyy <yyhhyyyyyy8@gmail.com>
Date: Mon, 11 Aug 2025 10:13:17 +0800
Subject: [PATCH 2/2] refactor: extract scrollable popover functionality from
 shadcn ui components

---
 src/renderer/src/components/NewThread.vue     | 39 ++++++++++--------
 .../src/components/ScrollablePopover.vue      | 34 +++++++++++++++
 src/renderer/src/components/TitleView.vue     | 41 +++++++++----------
 .../components/ui/popover/PopoverContent.vue  | 12 ++----
 4 files changed, 79 insertions(+), 47 deletions(-)
 create mode 100644 src/renderer/src/components/ScrollablePopover.vue

diff --git a/src/renderer/src/components/NewThread.vue b/src/renderer/src/components/NewThread.vue
index 8bd07cb85..c1e55dab5 100644
--- a/src/renderer/src/components/NewThread.vue
+++ b/src/renderer/src/components/NewThread.vue
@@ -64,8 +64,14 @@
                 />
               </PopoverContent>
             </Popover>
-            <Popover v-model:open="settingsPopoverOpen" @update:open="handleSettingsPopoverUpdate">
-              <PopoverTrigger as-child>
+            <ScrollablePopover
+              v-model:open="settingsPopoverOpen"
+              @update:open="handleSettingsPopoverUpdate"
+              align="start"
+              content-class="w-80"
+              :enable-scrollable="true"
+            >
+              <template #trigger>
                 <Button
                   class="w-7 h-full rounded-none border-none shadow-none transition-all duration-300"
                   :class="{
@@ -77,21 +83,19 @@
                 >
                   <Icon icon="lucide:settings-2" class="w-4 h-4" />
                 </Button>
-              </PopoverTrigger>
-              <PopoverContent align="start" class="p-0 w-80" :enable-scrollable="true">
-                <ChatConfig
-                  v-model:temperature="temperature"
-                  v-model:context-length="contextLength"
-                  v-model:max-tokens="maxTokens"
-                  v-model:system-prompt="systemPrompt"
-                  v-model:artifacts="artifacts"
-                  :context-length-limit="contextLengthLimit"
-                  :max-tokens-limit="maxTokensLimit"
-                  :model-id="activeModel?.id"
-                  :provider-id="activeModel?.providerId"
-                />
-              </PopoverContent>
-            </Popover>
+              </template>
+              <ChatConfig
+                v-model:temperature="temperature"
+                v-model:context-length="contextLength"
+                v-model:max-tokens="maxTokens"
+                v-model:system-prompt="systemPrompt"
+                v-model:artifacts="artifacts"
+                :context-length-limit="contextLengthLimit"
+                :max-tokens-limit="maxTokensLimit"
+                :model-id="activeModel?.id"
+                :provider-id="activeModel?.providerId"
+              />
+            </ScrollablePopover>
           </div>
         </template>
       </ChatInput>
@@ -104,6 +108,7 @@
 import { useI18n } from 'vue-i18n'
 import ChatInput from './ChatInput.vue'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import ScrollablePopover from './ScrollablePopover.vue'
 import { Button } from '@/components/ui/button'
 import ModelIcon from './icons/ModelIcon.vue'
 import { Badge } from '@/components/ui/badge'
diff --git a/src/renderer/src/components/ScrollablePopover.vue b/src/renderer/src/components/ScrollablePopover.vue
new file mode 100644
index 000000000..7afa43c45
--- /dev/null
+++ b/src/renderer/src/components/ScrollablePopover.vue
@@ -0,0 +1,34 @@
+<template>
+  <Popover v-bind="$attrs">
+    <PopoverTrigger as-child>
+      <slot name="trigger" />
+    </PopoverTrigger>
+    <PopoverContent
+      :align="align"
+      :class="cn('p-0', contentClass, enableScrollable && 'max-h-96 overflow-hidden')"
+    >
+      <div v-if="enableScrollable" class="max-h-96 overflow-y-auto">
+        <slot />
+      </div>
+      <slot v-else />
+    </PopoverContent>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+
+interface ScrollablePopoverProps {
+  align?: 'start' | 'center' | 'end'
+  enableScrollable?: boolean
+  contentClass?: HTMLAttributes['class']
+}
+
+withDefaults(defineProps<ScrollablePopoverProps>(), {
+  align: 'center',
+  enableScrollable: false,
+  contentClass: ''
+})
+</script>
diff --git a/src/renderer/src/components/TitleView.vue b/src/renderer/src/components/TitleView.vue
index 1a6f726fc..7618af8b0 100644
--- a/src/renderer/src/components/TitleView.vue
+++ b/src/renderer/src/components/TitleView.vue
@@ -43,30 +43,28 @@
     </div>
 
     <div class="flex items-center gap-2">
-      <Popover>
-        <PopoverTrigger as-child>
+      <ScrollablePopover align="end" content-class="w-80" :enable-scrollable="true">
+        <template #trigger>
           <Button class="w-7 h-7 rounded-md" size="icon" variant="outline">
             <Icon icon="lucide:settings-2" class="w-4 h-4" />
           </Button>
-        </PopoverTrigger>
-        <PopoverContent align="end" class="p-0 w-80" :enable-scrollable="true">
-          <ChatConfig
-            v-model:system-prompt="systemPrompt"
-            :temperature="temperature"
-            :context-length="contextLength"
-            :max-tokens="maxTokens"
-            :artifacts="artifacts"
-            :thinking-budget="thinkingBudget"
-            :model-id="chatStore.chatConfig.modelId"
-            :provider-id="chatStore.chatConfig.providerId"
-            @update:temperature="updateTemperature"
-            @update:context-length="updateContextLength"
-            @update:max-tokens="updateMaxTokens"
-            @update:artifacts="updateArtifacts"
-            @update:thinking-budget="updateThinkingBudget"
-          />
-        </PopoverContent>
-      </Popover>
+        </template>
+        <ChatConfig
+          v-model:system-prompt="systemPrompt"
+          :temperature="temperature"
+          :context-length="contextLength"
+          :max-tokens="maxTokens"
+          :artifacts="artifacts"
+          :thinking-budget="thinkingBudget"
+          :model-id="chatStore.chatConfig.modelId"
+          :provider-id="chatStore.chatConfig.providerId"
+          @update:temperature="updateTemperature"
+          @update:context-length="updateContextLength"
+          @update:max-tokens="updateMaxTokens"
+          @update:artifacts="updateArtifacts"
+          @update:thinking-budget="updateThinkingBudget"
+        />
+      </ScrollablePopover>
     </div>
   </div>
 </template>
@@ -77,6 +75,7 @@ import { Icon } from '@iconify/vue'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import ScrollablePopover from './ScrollablePopover.vue'
 import ChatConfig from './ChatConfig.vue'
 import ModelSelect from './ModelSelect.vue'
 import ModelIcon from './icons/ModelIcon.vue'
diff --git a/src/renderer/src/components/ui/popover/PopoverContent.vue b/src/renderer/src/components/ui/popover/PopoverContent.vue
index e0d99fa72..6744b583b 100644
--- a/src/renderer/src/components/ui/popover/PopoverContent.vue
+++ b/src/renderer/src/components/ui/popover/PopoverContent.vue
@@ -12,18 +12,16 @@ defineOptions({
 const props = withDefaults(
   defineProps<PopoverContentProps & {
     class?: HTMLAttributes['class']
-    enableScrollable?: boolean
   }>(),
   {
     align: 'center',
-    sideOffset: 4,
-    enableScrollable: false
+    sideOffset: 4
   }
 )
 const emits = defineEmits<PopoverContentEmits>()
 
 const delegatedProps = computed(() => {
-  const { class: _, enableScrollable: __, ...delegated } = props
+  const { class: _, ...delegated } = props
 
   return delegated
 })
@@ -38,15 +36,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       :class="
         cn(
           'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          props.enableScrollable && 'max-h-96 overflow-hidden',
           props.class
         )
       "
     >
-      <div v-if="props.enableScrollable" class="max-h-96 overflow-y-auto">
-        <slot />
-      </div>
-      <slot v-else />
+      <slot />
     </PopoverContent>
   </PopoverPortal>
 </template>