From a88c15c906fa721bd73a0aa631b6a3b5f7087bb2 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Mon, 8 Jun 2026 09:45:39 +0800
Subject: [PATCH] fix(web): align viewport and overlay accessibility (#37142)

Signed-off-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
---
 packages/dify-ui/src/alert-dialog/__tests__/index.spec.tsx | 1 +
 packages/dify-ui/src/alert-dialog/index.tsx                | 2 +-
 packages/dify-ui/src/dialog/__tests__/index.spec.tsx       | 1 +
 packages/dify-ui/src/dialog/index.tsx                      | 2 +-
 packages/dify-ui/src/drawer/__tests__/index.spec.tsx       | 2 +-
 packages/dify-ui/src/drawer/index.tsx                      | 2 +-
 web/app/layout.tsx                                         | 2 --
 web/app/styles/preflight.css                               | 1 +
 8 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/dify-ui/src/alert-dialog/__tests__/index.spec.tsx b/packages/dify-ui/src/alert-dialog/__tests__/index.spec.tsx
index 5248be9a16..18e7c3b13f 100644
--- a/packages/dify-ui/src/alert-dialog/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/alert-dialog/__tests__/index.spec.tsx
@@ -26,6 +26,7 @@ describe('AlertDialog wrapper', () => {
 
       await expect.element(screen.getByRole('alertdialog')).toHaveTextContent('Confirm Delete')
       await expect.element(screen.getByRole('alertdialog')).toHaveTextContent('This action cannot be undone.')
+      await expect.element(document.body.querySelector('.bg-background-overlay') as HTMLElement).toHaveClass('absolute', 'inset-0', 'z-50')
     })
 
     it('should not render content when dialog is closed', async () => {
diff --git a/packages/dify-ui/src/alert-dialog/index.tsx b/packages/dify-ui/src/alert-dialog/index.tsx
index 81299ef932..e3c8cddd7a 100644
--- a/packages/dify-ui/src/alert-dialog/index.tsx
+++ b/packages/dify-ui/src/alert-dialog/index.tsx
@@ -29,7 +29,7 @@ export function AlertDialogContent({
       <BaseAlertDialog.Backdrop
         {...backdropProps}
         className={cn(
-          'fixed inset-0 z-50 bg-background-overlay',
+          'absolute 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',
           backdropClassName,
         )}
diff --git a/packages/dify-ui/src/dialog/__tests__/index.spec.tsx b/packages/dify-ui/src/dialog/__tests__/index.spec.tsx
index e2126d1441..04c2b9b650 100644
--- a/packages/dify-ui/src/dialog/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/dialog/__tests__/index.spec.tsx
@@ -23,6 +23,7 @@ describe('Dialog wrapper', () => {
 
       await expect.element(screen.getByRole('dialog')).toHaveTextContent('Dialog Title')
       await expect.element(screen.getByRole('dialog')).toHaveTextContent('Dialog Description')
+      await expect.element(document.body.querySelector('.bg-background-overlay') as HTMLElement).toHaveClass('absolute', 'inset-0', 'z-50')
     })
   })
 
diff --git a/packages/dify-ui/src/dialog/index.tsx b/packages/dify-ui/src/dialog/index.tsx
index 71ed164c9e..95b438df09 100644
--- a/packages/dify-ui/src/dialog/index.tsx
+++ b/packages/dify-ui/src/dialog/index.tsx
@@ -56,7 +56,7 @@ export function DialogContent({
       <BaseDialog.Backdrop
         {...backdropProps}
         className={cn(
-          'fixed inset-0 z-50 bg-background-overlay',
+          'absolute 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',
           backdropClassName,
         )}
diff --git a/packages/dify-ui/src/drawer/__tests__/index.spec.tsx b/packages/dify-ui/src/drawer/__tests__/index.spec.tsx
index a0ca1cdf99..8384199e15 100644
--- a/packages/dify-ui/src/drawer/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/drawer/__tests__/index.spec.tsx
@@ -49,7 +49,7 @@ describe('Drawer wrapper', () => {
       expect(screen.container).not.toContainElement(dialog)
       await expect.element(dialog).toHaveTextContent('Workspace controls')
       await expect.element(screen.getByText('Configure the current workspace.')).toBeInTheDocument()
-      await expect.element(screen.getByTestId('drawer-backdrop')).toHaveClass('z-50')
+      await expect.element(screen.getByTestId('drawer-backdrop')).toHaveClass('absolute', 'inset-0', 'z-50')
 
       asHTMLElement(screen.getByRole('button', { name: 'Close drawer' }).element()).click()
 
diff --git a/packages/dify-ui/src/drawer/index.tsx b/packages/dify-ui/src/drawer/index.tsx
index e22bc3f4f5..24da53c57c 100644
--- a/packages/dify-ui/src/drawer/index.tsx
+++ b/packages/dify-ui/src/drawer/index.tsx
@@ -32,7 +32,7 @@ export function DrawerBackdrop({
   return (
     <BaseDrawer.Backdrop
       className={cn(
-        'fixed inset-0 z-50 bg-background-overlay opacity-[calc(1-var(--drawer-swipe-progress,0))]',
+        'absolute inset-0 z-50 bg-background-overlay opacity-[calc(1-var(--drawer-swipe-progress,0))]',
         'transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 motion-reduce:transition-none',
         className,
       )}
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 6c78ac82e7..079ae1f657 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -21,9 +21,7 @@ import './styles/markdown.css'
 export const viewport: Viewport = {
   width: 'device-width',
   initialScale: 1,
-  maximumScale: 1,
   viewportFit: 'cover',
-  userScalable: false,
 }
 
 const LocaleLayout = async ({
diff --git a/web/app/styles/preflight.css b/web/app/styles/preflight.css
index 699583cd63..e47baeab84 100644
--- a/web/app/styles/preflight.css
+++ b/web/app/styles/preflight.css
@@ -45,6 +45,7 @@ html,
 body {
   margin: 0; /* 1 */
   line-height: inherit; /* 2 */
+  position: relative;
 }
 
 /*