From 9f98889950bda9bcb570f01519bc8426f2dca90b Mon Sep 17 00:00:00 2001
From: "metadiver.eth" <info@metadiver.com>
Date: Thu, 1 Dec 2022 15:27:16 +1100
Subject: [PATCH 1/3] chore: fix vertical scrolling after opening the Mobile
 paring modal

---
 src/services/pairing/QRModal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/services/pairing/QRModal.tsx b/src/services/pairing/QRModal.tsx
index e882f1eb4f..5e8483e199 100644
--- a/src/services/pairing/QRModal.tsx
+++ b/src/services/pairing/QRModal.tsx
@@ -45,6 +45,7 @@ const close = () => {
   const wrapper = document.getElementById(WRAPPER_ID)
   if (wrapper) {
     document.body.removeChild(wrapper)
+    document.body.style.removeProperty('overflow')
   }
 }
 

From ef02f6cee68b7304f3504e095ef72a80f06d1958 Mon Sep 17 00:00:00 2001
From: "metadiver.eth" <info@metadiver.com>
Date: Thu, 1 Dec 2022 22:28:29 +1100
Subject: [PATCH 2/3] cheking CLA


From b189e3805be802d3a6729074552ede96c192f339 Mon Sep 17 00:00:00 2001
From: "metadiver.eth" <info@metadiver.com>
Date: Tue, 6 Dec 2022 08:55:36 +1100
Subject: [PATCH 3/3] alternative fix: make Dialog a controlled component

---
 src/services/pairing/QRModal.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/services/pairing/QRModal.tsx b/src/services/pairing/QRModal.tsx
index 5e8483e199..6765394596 100644
--- a/src/services/pairing/QRModal.tsx
+++ b/src/services/pairing/QRModal.tsx
@@ -1,7 +1,7 @@
+import { useState } from 'react'
 import { Dialog, DialogContent, DialogTitle, IconButton } from '@mui/material'
 import { createRoot } from 'react-dom/client'
 import CloseIcon from '@mui/icons-material/Close'
-
 import PairingQRCode from '@/components/common/PairingDetails/PairingQRCode'
 import PairingDescription from '@/components/common/PairingDetails/PairingDescription'
 import { StoreHydrator } from '@/store'
@@ -45,20 +45,22 @@ const close = () => {
   const wrapper = document.getElementById(WRAPPER_ID)
   if (wrapper) {
     document.body.removeChild(wrapper)
-    document.body.style.removeProperty('overflow')
   }
 }
 
 const Modal = ({ uri, cb }: { uri: string; cb: () => void }) => {
+  const [open, setOpen] = useState(true)
+
   const handleClose = () => {
     cb()
+    setOpen(false)
     close()
   }
 
   return (
     <StoreHydrator>
       <AppProviders>
-        <Dialog open onClose={handleClose} disablePortal className={css.modal}>
+        <Dialog open={open} onClose={handleClose} disablePortal className={css.modal}>
           <DialogTitle sx={{ m: 0, p: 2, display: 'flex', justifyContent: 'space-between' }}>
             {PAIRING_MODULE_LABEL}
             <IconButton