From 01d6d15788b65d867bf7b6752fd80ea483851d14 Mon Sep 17 00:00:00 2001
From: Chayan Das <01chayandas@gmail.com>
Date: Sun, 8 Feb 2026 19:27:44 +0530
Subject: [PATCH 1/7] fronted(modal): fix the position of modal overlay

---
 src/components/modal/modal.tsx                | 10 ++-
 src/components/overlay/overlay.tsx            | 66 ++++++++++++-------
 .../logs-screen/buffer-config-modal.tsx       |  1 -
 .../logs-screen/log-warning-modal.tsx         |  1 -
 4 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index f28150b48..59500a441 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -70,20 +70,18 @@ export const Modal: React.FC<ModalProps> = ({
 }) => {
   return (
     <div
-      className={`${className} bg-white w-80 shadow-4 sans-serif relative`}
+      className={`${className} bg-white shadow-4 sans-serif relative`}
       data-testid="ipfs-modal"
       style={{
         maxWidth: '34em',
-        position: 'fixed',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)'
+        margin: 'auto'
       }}
       {...props}
     >
       {onCancel && (
         <CancelIcon
-          className='absolute pointer w2 h2 top-0 right-0 fill-gray'
+          className="absolute pointer w2 h2 fill-gray"
+          style={{ top: '0.5rem', right: '0.5rem' }}
           onClick={onCancel}
         />
       )}
diff --git a/src/components/overlay/overlay.tsx b/src/components/overlay/overlay.tsx
index ac2f15f55..1828112ee 100644
--- a/src/components/overlay/overlay.tsx
+++ b/src/components/overlay/overlay.tsx
@@ -1,33 +1,53 @@
-import React from 'react'
-import { Modal } from 'react-overlays'
+import React, { useEffect } from 'react'
+import { createPortal } from 'react-dom'
 
-type ModalProps = React.ComponentProps<typeof Modal>
-
-export interface OverlayProps extends Omit<ModalProps, 'renderBackdrop' | 'onHide'> {
+export interface OverlayProps {
   show: boolean
   onLeave: () => void
-  hidden: boolean
+  hidden?: boolean
+  className?: string
+  children?: React.ReactNode
 }
 
-const Overlay: React.FC<OverlayProps> = ({ children, show, onLeave, className = '', hidden, ...props }) => {
-  const renderBackdrop: React.FC<React.HTMLAttributes<HTMLDivElement>> = (props) => (
-    <div className='fixed top-0 left-0 right-0 bottom-0 bg-black o-50' hidden={hidden} {...props} />
-  )
+const Overlay: React.FC<OverlayProps> = ({ children, show, onLeave, className = '', hidden }) => {
+  useEffect(() => {
+    if (!show) return
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onLeave()
+      }
+    }
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [show, onLeave])
+
+  if (!show) return null
 
-  return (
-    // Note: react-overlays Modal manages its own portal and positioning.
-    // The Modal child component uses fixed positioning to center itself.
-    // onHide handles both backdrop clicks and escape key presses.
-    <Modal
-      {...props}
-      show={show}
-      backdrop={true}
-      className={`${className} z-max`}
-      renderBackdrop={renderBackdrop}
-      onHide={onLeave}>
-      {children}
-    </Modal>
+  const overlay = (
+    <>
+      <div
+        className='fixed top-0 left-0 right-0 bottom-0 bg-black o-50'
+        hidden={hidden}
+        onClick={onLeave}
+        onKeyDown={(e) => e.key === 'Enter' && onLeave()}
+        role="button"
+        tabIndex={0}
+        aria-label="Close modal"
+        style={{ zIndex: 9998 }}
+      />
+
+      <div
+        className={`${className} fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center`}
+        style={{ zIndex: 9999, pointerEvents: 'none', padding: '2rem' }}
+      >
+        <div style={{ pointerEvents: 'auto', maxWidth: '100%', maxHeight: '100%', overflow: 'auto' }}>
+          {children}
+        </div>
+      </div>
+    </>
   )
+
+  return createPortal(overlay, document.body)
 }
 
 export default Overlay
diff --git a/src/diagnostics/logs-screen/buffer-config-modal.tsx b/src/diagnostics/logs-screen/buffer-config-modal.tsx
index 34466e746..50b2435b0 100644
--- a/src/diagnostics/logs-screen/buffer-config-modal.tsx
+++ b/src/diagnostics/logs-screen/buffer-config-modal.tsx
@@ -63,7 +63,6 @@ export const BufferConfigModal: React.FC<BufferConfigModalProps> = ({
   }
 
   return (
-    // @ts-expect-error - Overlay is not typed
     <Overlay show={isOpen} onLeave={handleCancel}>
       <Modal onCancel={handleCancel} className="outline-0">
         <div className='pa4'>
diff --git a/src/diagnostics/logs-screen/log-warning-modal.tsx b/src/diagnostics/logs-screen/log-warning-modal.tsx
index 99bf93e48..fd6bc1a3c 100644
--- a/src/diagnostics/logs-screen/log-warning-modal.tsx
+++ b/src/diagnostics/logs-screen/log-warning-modal.tsx
@@ -83,7 +83,6 @@ const LogWarningModal: React.FC<LogWarningModalProps> = ({
   if (warningType == null) return null
 
   return (
-    // @ts-expect-error - Overlay is not typed
     <Overlay show={isOpen} onLeave={onClose}>
       <Modal onCancel={onClose} className="outline-0">
         <ModalBody>

From 2d3c081e8f0322f7cb78a0d683c68b7870b9c2e7 Mon Sep 17 00:00:00 2001
From: Chayan Das <01chayandas@gmail.com>
Date: Sun, 8 Feb 2026 19:48:36 +0530
Subject: [PATCH 2/7] fronted(modal): fix the ci e2e test

---
 src/components/modal/modal.test.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/modal/modal.test.tsx b/src/components/modal/modal.test.tsx
index d260b7ed9..65bc5e03b 100644
--- a/src/components/modal/modal.test.tsx
+++ b/src/components/modal/modal.test.tsx
@@ -14,7 +14,7 @@ describe('Modal', () => {
     it('renders with default props', () => {
       const { container } = render(<Modal />)
       const modalElement = container.firstChild as HTMLElement
-      expect(modalElement).toHaveClass('bg-white', 'w-80', 'shadow-4', 'sans-serif', 'relative')
+      expect(modalElement).toHaveClass('bg-white', 'shadow-4', 'sans-serif', 'relative')
       expect(modalElement).toHaveStyle({ maxWidth: '34em' })
     })
 
@@ -23,7 +23,7 @@ describe('Modal', () => {
       const { container } = render(<Modal className={customClass} />)
       const modalElement = container.firstChild as HTMLElement
       expect(modalElement).toHaveClass(customClass)
-      expect(modalElement).toHaveClass('bg-white', 'w-80', 'shadow-4', 'sans-serif', 'relative')
+      expect(modalElement).toHaveClass('bg-white', 'shadow-4', 'sans-serif', 'relative')
     })
 
     it('renders children correctly', () => {
@@ -42,7 +42,7 @@ describe('Modal', () => {
 
       const cancelIcon = container.querySelector('svg')
       expect(cancelIcon).toBeInTheDocument()
-      expect(cancelIcon).toHaveClass('absolute', 'pointer', 'w2', 'h2', 'top-0', 'right-0', 'fill-gray')
+      expect(cancelIcon).toHaveClass('absolute', 'pointer', 'w2', 'h2', 'fill-gray')
     })
 
     it('does not render cancel icon when onCancel is not provided', () => {
@@ -242,7 +242,7 @@ describe('Modal', () => {
       // Check Modal container
       const modalElement = container.firstChild as HTMLElement
       expect(modalElement).toHaveClass('test-modal')
-      expect(modalElement).toHaveClass('bg-white', 'w-80', 'shadow-4', 'sans-serif', 'relative')
+      expect(modalElement).toHaveClass('bg-white', 'shadow-4', 'sans-serif', 'relative')
 
       // Check cancel icon
       const cancelIcon = container.querySelector('svg')

From 89cdd78fc067e4fd40c9e962f9bdbbc45c348d1f Mon Sep 17 00:00:00 2001
From: Chayan Das <01chayandas@gmail.com>
Date: Sun, 8 Feb 2026 19:56:31 +0530
Subject: [PATCH 3/7] fronted(modal): fix the ci e2e test

---
 src/components/overlay/overlay.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/overlay/overlay.tsx b/src/components/overlay/overlay.tsx
index 1828112ee..75ae6501f 100644
--- a/src/components/overlay/overlay.tsx
+++ b/src/components/overlay/overlay.tsx
@@ -39,6 +39,8 @@ const Overlay: React.FC<OverlayProps> = ({ children, show, onLeave, className =
       <div
         className={`${className} fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center`}
         style={{ zIndex: 9999, pointerEvents: 'none', padding: '2rem' }}
+        role="dialog"
+        aria-modal="true"
       >
         <div style={{ pointerEvents: 'auto', maxWidth: '100%', maxHeight: '100%', overflow: 'auto' }}>
           {children}

From d1006ece2c8adb1e42fe05a9a68ad77f895ad660 Mon Sep 17 00:00:00 2001
From: Chayan Das <01chayandas@gmail.com>
Date: Sun, 8 Feb 2026 20:09:20 +0530
Subject: [PATCH 4/7] fronted(modal): fix the ci e2e test

---
 test/e2e/files.test.js | 8 ++++----
 test/e2e/ipns.test.js  | 3 +++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/test/e2e/files.test.js b/test/e2e/files.test.js
index 9786ee26d..ef498b072 100644
--- a/test/e2e/files.test.js
+++ b/test/e2e/files.test.js
@@ -136,8 +136,8 @@ test.describe('Files screen', () => {
     await pathInput.fill(testPath)
     await files.dialogInput(page, 'name').fill(testFilename)
 
-    // Click Import button
-    const importDialogButton = page.getByRole('button', { name: 'Import' })
+    // Click Import button in the dialog
+    const importDialogButton = files.dialog(page).getByRole('button', { name: 'Import' })
     await expect(importDialogButton).toBeVisible()
     await importDialogButton.click()
 
@@ -192,7 +192,7 @@ test.describe('Files screen', () => {
     await pathInput.fill(nonExistentPath)
 
     // Click Import button to submit
-    const importDialogButton = page.getByRole('button', { name: 'Import' })
+    const importDialogButton = files.dialog(page).getByRole('button', { name: 'Import' })
     await expect(importDialogButton).toBeVisible()
     await importDialogButton.click()
 
@@ -234,7 +234,7 @@ test.describe('Files screen', () => {
     await files.importButton(page).click()
     await files.addByPathOption(page).click()
     await files.dialogInput(page, 'path').fill(invalidPath)
-    await page.getByRole('button', { name: 'Import' }).click()
+    await files.dialog(page).getByRole('button', { name: 'Import' }).click()
 
     // Wait for error notification
     const notification = page.locator('.fileImportStatus')
diff --git a/test/e2e/ipns.test.js b/test/e2e/ipns.test.js
index b4df09f8a..2b175294a 100644
--- a/test/e2e/ipns.test.js
+++ b/test/e2e/ipns.test.js
@@ -110,6 +110,9 @@ test.describe('IPNS publishing', () => {
       await files.dialogInput(page, 'name').fill(testFilename)
       await page.keyboard.press('Enter')
 
+      // Wait for the dialog to close before proceeding
+      await expect(pathInput).not.toBeVisible({ timeout: 10000 })
+
       // expect file with matching filename to be added to the file list
       const fileRow = page.getByTestId('file-row').filter({ hasText: testFilename })
       await expect(fileRow).toBeVisible()

From 801b196d23505f8a692c16679ff1abf4604cae34 Mon Sep 17 00:00:00 2001
From: Chayan Das <01chayandas@gmail.com>
Date: Sun, 8 Feb 2026 20:55:24 +0530
Subject: [PATCH 5/7] fronted(modal): fix the ci e2e test

---
 test/e2e/files.test.js | 8 ++++----
 test/e2e/ipns.test.js  | 3 +++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/test/e2e/files.test.js b/test/e2e/files.test.js
index ef498b072..0a93ff343 100644
--- a/test/e2e/files.test.js
+++ b/test/e2e/files.test.js
@@ -1,6 +1,6 @@
 import { test, expect } from './setup/coverage.js'
 import { fixtureData } from './fixtures/index.js'
-import { files, explore, dismissImportNotification } from './setup/locators.js'
+import { files, explore, modal, dismissImportNotification } from './setup/locators.js'
 import { selectViewMode, toggleSearchFilter } from '../helpers/grid'
 import all from 'it-all'
 import filesize from 'filesize'
@@ -137,7 +137,7 @@ test.describe('Files screen', () => {
     await files.dialogInput(page, 'name').fill(testFilename)
 
     // Click Import button in the dialog
-    const importDialogButton = files.dialog(page).getByRole('button', { name: 'Import' })
+    const importDialogButton = modal.container(page).getByRole('button', { name: 'Import' })
     await expect(importDialogButton).toBeVisible()
     await importDialogButton.click()
 
@@ -192,7 +192,7 @@ test.describe('Files screen', () => {
     await pathInput.fill(nonExistentPath)
 
     // Click Import button to submit
-    const importDialogButton = files.dialog(page).getByRole('button', { name: 'Import' })
+    const importDialogButton = modal.container(page).getByRole('button', { name: 'Import' })
     await expect(importDialogButton).toBeVisible()
     await importDialogButton.click()
 
@@ -234,7 +234,7 @@ test.describe('Files screen', () => {
     await files.importButton(page).click()
     await files.addByPathOption(page).click()
     await files.dialogInput(page, 'path').fill(invalidPath)
-    await files.dialog(page).getByRole('button', { name: 'Import' }).click()
+    await modal.container(page).getByRole('button', { name: 'Import' }).click()
 
     // Wait for error notification
     const notification = page.locator('.fileImportStatus')
diff --git a/test/e2e/ipns.test.js b/test/e2e/ipns.test.js
index 2b175294a..e68171c44 100644
--- a/test/e2e/ipns.test.js
+++ b/test/e2e/ipns.test.js
@@ -112,6 +112,9 @@ test.describe('IPNS publishing', () => {
 
       // Wait for the dialog to close before proceeding
       await expect(pathInput).not.toBeVisible({ timeout: 10000 })
+      
+      // Also wait for the modal overlay to be completely gone
+      await page.locator('[aria-label="Close modal"]').waitFor({ state: 'hidden', timeout: 5000 }).catch(() => {})
 
       // expect file with matching filename to be added to the file list
       const fileRow = page.getByTestId('file-row').filter({ hasText: testFilename })

From 4ef6c3a3ac1bc44917b786b765d08797c1e9a6ed Mon Sep 17 00:00:00 2001
From: Chayan Das <01chayandas@gmail.com>
Date: Mon, 9 Feb 2026 15:02:05 +0530
Subject: [PATCH 6/7] fronted(modal): fix the ci e2e test

---
 src/files/file-import-status/FileImportStatus.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/files/file-import-status/FileImportStatus.js b/src/files/file-import-status/FileImportStatus.js
index 710ded45f..f127ae823 100644
--- a/src/files/file-import-status/FileImportStatus.js
+++ b/src/files/file-import-status/FileImportStatus.js
@@ -153,7 +153,7 @@ export const FileImportStatus = ({ filesFinished, filesPending, filesErrors, doF
   const containerClass = hasErrors ? 'fileImportStatusError' : ''
 
   return (
-    <div className='fileImportStatus fixed bottom-1 w-100 flex justify-center' style={{ zIndex: 14, pointerEvents: 'none' }}>
+    <div className='fileImportStatus fixed bottom-1 w-100 flex justify-center' style={{ zIndex: 10000, pointerEvents: 'none' }}>
       <div className={`relative br1 dark-gray w-40 center ba b--light-gray bg-white ${containerClass}`} style={{ pointerEvents: 'auto' }}>
         <div
           tabIndex="0"

From d719f60494d23af44fca5ebb2f2d093ba4b8b7ed Mon Sep 17 00:00:00 2001
From: Chayan Das <01chayandas@gmail.com>
Date: Mon, 9 Feb 2026 15:09:19 +0530
Subject: [PATCH 7/7] fronted(modal): fix the eslint

---
 test/e2e/ipns.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/ipns.test.js b/test/e2e/ipns.test.js
index e68171c44..66e27fac9 100644
--- a/test/e2e/ipns.test.js
+++ b/test/e2e/ipns.test.js
@@ -112,7 +112,7 @@ test.describe('IPNS publishing', () => {
 
       // Wait for the dialog to close before proceeding
       await expect(pathInput).not.toBeVisible({ timeout: 10000 })
-      
+
       // Also wait for the modal overlay to be completely gone
       await page.locator('[aria-label="Close modal"]').waitFor({ state: 'hidden', timeout: 5000 }).catch(() => {})