From 9576555c90af1ce7470e8d9a671cad2b55764900 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=AA=E5=BF=97=E9=B9=8F?= <13476859295@163.com>
Date: Sat, 6 May 2023 23:59:04 +0800
Subject: [PATCH 1/4] fixed bug: if zoom out the browser, the components can't
 be clicked

---
 packages/ui/src/layout/MainLayout/index.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/layout/MainLayout/index.js b/packages/ui/src/layout/MainLayout/index.js
index 8c874474..019e728b 100644
--- a/packages/ui/src/layout/MainLayout/index.js
+++ b/packages/ui/src/layout/MainLayout/index.js
@@ -1,4 +1,3 @@
-import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Outlet } from 'react-router-dom'
 
@@ -69,10 +68,10 @@ const MainLayout = () => {
         dispatch({ type: SET_MENU, opened: !leftDrawerOpened })
     }
 
-    useEffect(() => {
-        dispatch({ type: SET_MENU, opened: !matchDownMd })
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [matchDownMd])
+    //useEffect(() => {
+    //    dispatch({ type: SET_MENU, opened: !matchDownMd })
+    //    // eslint-disable-next-line react-hooks/exhaustive-deps
+    //}, [matchDownMd])
 
     return (
         <Box sx={{ display: 'flex' }}>

From d411aaf2d8a2c3cb3bdee2fbb4fe7097726e9f05 Mon Sep 17 00:00:00 2001
From: Henry Heng <henryheng@flowiseai.com>
Date: Sun, 14 May 2023 19:13:21 +0100
Subject: [PATCH 2/4] Fix bug where components unclickable

---
 packages/ui/src/layout/MainLayout/index.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/ui/src/layout/MainLayout/index.js b/packages/ui/src/layout/MainLayout/index.js
index 019e728b..4e9f1832 100644
--- a/packages/ui/src/layout/MainLayout/index.js
+++ b/packages/ui/src/layout/MainLayout/index.js
@@ -59,7 +59,6 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({
 
 const MainLayout = () => {
     const theme = useTheme()
-    const matchDownMd = useMediaQuery(theme.breakpoints.down('lg'))
 
     // Handle left drawer
     const leftDrawerOpened = useSelector((state) => state.customization.opened)
@@ -68,11 +67,6 @@ const MainLayout = () => {
         dispatch({ type: SET_MENU, opened: !leftDrawerOpened })
     }
 
-    //useEffect(() => {
-    //    dispatch({ type: SET_MENU, opened: !matchDownMd })
-    //    // eslint-disable-next-line react-hooks/exhaustive-deps
-    //}, [matchDownMd])
-
     return (
         <Box sx={{ display: 'flex' }}>
             <CssBaseline />

From 71ee2268243c01681084305c610da69caba404b5 Mon Sep 17 00:00:00 2001
From: Henry Heng <henryheng@flowiseai.com>
Date: Sun, 14 May 2023 19:31:00 +0100
Subject: [PATCH 3/4] Add setTimeout to fix the bug

---
 packages/ui/src/layout/MainLayout/index.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/ui/src/layout/MainLayout/index.js b/packages/ui/src/layout/MainLayout/index.js
index 4e9f1832..c65de322 100644
--- a/packages/ui/src/layout/MainLayout/index.js
+++ b/packages/ui/src/layout/MainLayout/index.js
@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Outlet } from 'react-router-dom'
 
@@ -59,6 +60,7 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({
 
 const MainLayout = () => {
     const theme = useTheme()
+    const matchDownMd = useMediaQuery(theme.breakpoints.down('lg'))
 
     // Handle left drawer
     const leftDrawerOpened = useSelector((state) => state.customization.opened)
@@ -66,6 +68,11 @@ const MainLayout = () => {
     const handleLeftDrawerToggle = () => {
         dispatch({ type: SET_MENU, opened: !leftDrawerOpened })
     }
+    
+    useEffect(() => {
+        setTimeout(() => dispatch({ type: SET_MENU, opened: !matchDownMd }), 0)
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [matchDownMd])
 
     return (
         <Box sx={{ display: 'flex' }}>

From 9dc658b850e6f14a324998ff2d6015b8dea61a36 Mon Sep 17 00:00:00 2001
From: Henry Heng <henryheng@flowiseai.com>
Date: Sun, 14 May 2023 19:31:38 +0100
Subject: [PATCH 4/4] yarn lint

---
 packages/ui/src/layout/MainLayout/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/layout/MainLayout/index.js b/packages/ui/src/layout/MainLayout/index.js
index c65de322..71ead115 100644
--- a/packages/ui/src/layout/MainLayout/index.js
+++ b/packages/ui/src/layout/MainLayout/index.js
@@ -68,7 +68,7 @@ const MainLayout = () => {
     const handleLeftDrawerToggle = () => {
         dispatch({ type: SET_MENU, opened: !leftDrawerOpened })
     }
-    
+
     useEffect(() => {
         setTimeout(() => dispatch({ type: SET_MENU, opened: !matchDownMd }), 0)
         // eslint-disable-next-line react-hooks/exhaustive-deps