From e6e5d761c2ba066e887d394dd42089f973100045 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 28 Jul 2026 12:01:12 +0800
Subject: [PATCH] fix: prevent Safari from clipping the settings close button
 (#39664)

Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
---
 .../header/account-setting/index.tsx          | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index 39e8ea60306..7749686568e 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -211,6 +211,18 @@ export default function AccountSetting({
 
   return (
     <MenuDialog show onClose={handleClose}>
+      <div className="fixed top-6 right-6 z-20 flex shrink-0 flex-col items-center">
+        <Button
+          variant="tertiary"
+          size="large"
+          className="px-2"
+          aria-label={t(($) => $['operation.close'], { ns: 'common' })}
+          onClick={handleClose}
+        >
+          <span className="i-ri-close-line size-5" />
+        </Button>
+        <div className="mt-1 system-2xs-medium-uppercase text-text-tertiary">ESC</div>
+      </div>
       <div className="flex h-screen w-full max-w-full pl-0 sm:pl-[232px]">
         <div className="flex w-[44px] shrink-0 flex-col pr-6 pl-4 sm:w-[224px]">
           <div className="mt-6 mb-8 flex h-[38px] items-center px-3 title-2xl-semi-bold whitespace-nowrap text-text-primary">
@@ -275,18 +287,6 @@ export default function AccountSetting({
                   </div>
                 )}
               </div>
-              <div className="fixed top-6 right-6 flex shrink-0 flex-col items-center">
-                <Button
-                  variant="tertiary"
-                  size="large"
-                  className="px-2"
-                  aria-label={t(($) => $['operation.close'], { ns: 'common' })}
-                  onClick={handleClose}
-                >
-                  <span className="i-ri-close-line size-5" />
-                </Button>
-                <div className="mt-1 system-2xs-medium-uppercase text-text-tertiary">ESC</div>
-              </div>
             </div>
             <div className="max-w-full min-w-0 px-4 pt-6 sm:px-8">
               {activeMenu === ACCOUNT_SETTING_TAB.PROVIDER && (