From 539cbcae6ae9f965f7e0b66c97ebf6bacea2f817 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Wed, 4 Mar 2026 19:57:53 +0800
Subject: [PATCH] fix(account-settings): render nested system model backdrop
 via base ui

---
 web/app/components/base/ui/dialog/index.tsx   |  4 +++
 .../system-model-selector/index.tsx           | 27 ++++++++++---------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/web/app/components/base/ui/dialog/index.tsx b/web/app/components/base/ui/dialog/index.tsx
index b86f94c46f..15017b2b0e 100644
--- a/web/app/components/base/ui/dialog/index.tsx
+++ b/web/app/components/base/ui/dialog/index.tsx
@@ -43,20 +43,24 @@ type DialogContentProps = {
   children: React.ReactNode
   className?: string
   overlayClassName?: string
+  backdropProps?: React.ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>
 }
 
 export function DialogContent({
   children,
   className,
   overlayClassName,
+  backdropProps,
 }: DialogContentProps) {
   return (
     <DialogPortal>
       <BaseDialog.Backdrop
+        {...backdropProps}
         className={cn(
           'fixed inset-0 z-50 bg-background-overlay',
           'transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 motion-reduce:transition-none',
           overlayClassName,
+          backdropProps?.className,
         )}
       />
       <BaseDialog.Popup
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
index b472ea147a..a500465106 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -41,19 +41,19 @@ type SystemModelSelectorProps = {
   isLoading?: boolean
 }
 
-type SystemModelLabelKey =
-  | 'modelProvider.systemReasoningModel.key'
-  | 'modelProvider.embeddingModel.key'
-  | 'modelProvider.rerankModel.key'
-  | 'modelProvider.speechToTextModel.key'
-  | 'modelProvider.ttsModel.key'
+type SystemModelLabelKey
+  = | 'modelProvider.systemReasoningModel.key'
+    | 'modelProvider.embeddingModel.key'
+    | 'modelProvider.rerankModel.key'
+    | 'modelProvider.speechToTextModel.key'
+    | 'modelProvider.ttsModel.key'
 
-type SystemModelTipKey =
-  | 'modelProvider.systemReasoningModel.tip'
-  | 'modelProvider.embeddingModel.tip'
-  | 'modelProvider.rerankModel.tip'
-  | 'modelProvider.speechToTextModel.tip'
-  | 'modelProvider.ttsModel.tip'
+type SystemModelTipKey
+  = | 'modelProvider.systemReasoningModel.tip'
+    | 'modelProvider.embeddingModel.tip'
+    | 'modelProvider.rerankModel.tip'
+    | 'modelProvider.speechToTextModel.tip'
+    | 'modelProvider.ttsModel.tip'
 
 const SystemModel: FC<SystemModelSelectorProps> = ({
   textGenerationDefaultModel,
@@ -176,7 +176,8 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
       </Button>
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent
-          className="z-[60] w-[480px] max-w-[480px] overflow-hidden p-0"
+          backdropProps={{ forceRender: true }}
+          className="w-[480px] max-w-[480px] overflow-hidden p-0"
         >
           <DialogCloseButton className="right-5 top-5" />
           <div className="px-6 pb-3 pr-14 pt-6">