fix: Overlay between bottom toolbar and tab (#2313)

.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

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>

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()
       )}
     >

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}