From 4990499bda17d5d1a575e7e11593a969022337ad Mon Sep 17 00:00:00 2001
From: xcv58 <i@xcv58.com>
Date: Tue, 14 Feb 2023 22:49:50 -0500
Subject: [PATCH] fix: Overlay between bottom toolbar and tab (#2313)

---
 .circleci/config.yml                             | 4 +++-
 packages/extension/src/js/components/App.tsx     | 9 +++------
 packages/extension/src/js/components/Main.tsx    | 3 ++-
 packages/extension/src/js/components/WinList.tsx | 4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 6ca96d96f..d91418e1e 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -23,11 +23,13 @@ references:
         echo 'export PATH="$PNPM_HOME:$PATH"' >> ${BASH_ENV}
         source ${BASH_ENV}
         pnpm install
+        wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
+        pnpm dlx playwright install --with-deps chromium
 
 jobs:
   build-test:
     docker:
-      - image: circleci/node:lts-browsers
+      - image: circleci/node:17-browsers
     steps:
       - checkout
       - *restore_cache
diff --git a/packages/extension/src/js/components/App.tsx b/packages/extension/src/js/components/App.tsx
index fdb440acd..32919b0d9 100644
--- a/packages/extension/src/js/components/App.tsx
+++ b/packages/extension/src/js/components/App.tsx
@@ -7,7 +7,7 @@ import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import { StoreContext, store, useStore } from './hooks/useStore'
 import { ThemeContext } from './hooks/useTheme'
-import { browser, isProduction } from 'libs'
+import { browser } from 'libs'
 import { BrowserRouter } from 'react-router-dom'
 import Main from './Main'
 import { ReduceMotionProvider } from 'libs/useReduceMotion'
@@ -32,15 +32,12 @@ export default observer(() => {
       availWidth,
     })
   }, [systemTheme])
-  // The key for DndProvider is a workaround: https://github.com/react-dnd/react-dnd/issues/186#issuecomment-573567724
   return (
     <StrictMode>
       <StoreContext.Provider value={store}>
         <ThemeProvider theme={theme}>
-          <DndProvider
-            key={isProduction() ? 'dnd-provider' : Date.now()}
-            backend={HTML5Backend}
-          >
+          {/* The context for DndProvider is a workaround: https://github.com/react-dnd/react-dnd/issues/3257#issuecomment-1239254032 */}
+          <DndProvider context={window} backend={HTML5Backend}>
             <ThemeContext.Provider value={isDarkTheme}>
               <ReduceMotionProvider>
                 <BrowserRouter>
diff --git a/packages/extension/src/js/components/Main.tsx b/packages/extension/src/js/components/Main.tsx
index abcb97608..5a0652b10 100644
--- a/packages/extension/src/js/components/Main.tsx
+++ b/packages/extension/src/js/components/Main.tsx
@@ -18,7 +18,7 @@ const useQuery = () => new URLSearchParams(useLocation().search)
 export default observer(() => {
   const query = useQuery()
   const isPopup = !query.has(NOT_POPUP)
-  const { windowStore, shortcutStore } = useStore()
+  const { windowStore, shortcutStore, userStore } = useStore()
   useEffect(() => {
     windowStore.didMount()
     shortcutStore.didMount()
@@ -28,6 +28,7 @@ export default observer(() => {
     <main
       className={classNames(
         'flex flex-col h-screen overflow-hidden',
+        { 'pb-12': !userStore.toolbarAutoHide },
         useTextClasses()
       )}
     >
diff --git a/packages/extension/src/js/components/WinList.tsx b/packages/extension/src/js/components/WinList.tsx
index 30953e7aa..7467754d0 100644
--- a/packages/extension/src/js/components/WinList.tsx
+++ b/packages/extension/src/js/components/WinList.tsx
@@ -20,7 +20,7 @@ export default observer(() => {
   useEffect(() => {
     setContainerRef(scrollbarRef)
     onResize()
-  })
+  }, [])
 
   const resizeDetector = (
     <ReactResizeDetector
@@ -47,7 +47,7 @@ export default observer(() => {
   return (
     <div
       ref={scrollbarRef}
-      className="flex flex-col flex-wrap content-start flex-auto mb-0 mr-0 overflow-scroll"
+      className="flex flex-col flex-wrap content-start flex-auto mb-0 mr-0 overflow-scroll border-red-700"
     >
       {list}
       {resizeDetector}