chore: replace ReactRemoveScroll with FloatingOverlay (#81)

packages/app/package.json

@@ -22,7 +22,6 @@
     "@hiogawa/unocss-preset-antd": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-remove-scroll": "^2.5.5",
     "react-router-dom": "^6.8.0",
     "react-select": "^5.7.0"
   },

packages/app/src/components/drawer.tsx

@@ -1,4 +1,5 @@
 import {
+  FloatingOverlay,
   FloatingPortal,
   useDismiss,
   useFloating,
@@ -8,7 +9,6 @@ import {
 import { Transition } from "@hiogawa/tiny-transition/dist/react";
 import { tinyassert } from "@hiogawa/utils";
 import type React from "react";
-import { RemoveScroll } from "react-remove-scroll";
 
 export function Drawer(props: {
   open: boolean;
@@ -42,10 +42,7 @@ export function Drawer(props: {
           leaveTo="opacity-0"
         />
         {/* content */}
-        <RemoveScroll
-          className="fixed inset-0 overflow-hidden"
-          removeScrollBar={false}
-        >
+        <FloatingOverlay lockScroll>
           <Transition
             appear
             show={props.open}
@@ -64,7 +61,7 @@ export function Drawer(props: {
               {props.children}
             </div>
           </Transition>
-        </RemoveScroll>
+        </FloatingOverlay>
       </Transition>
     </FloatingPortal>
   );

packages/app/src/components/modal.tsx

@@ -1,4 +1,5 @@
 import {
+  FloatingOverlay,
   FloatingPortal,
   useDismiss,
   useFloating,
@@ -8,7 +9,6 @@ import {
 import { Transition } from "@hiogawa/tiny-transition/dist/react";
 import { tinyassert } from "@hiogawa/utils";
 import React from "react";
-import { RemoveScroll } from "react-remove-scroll";
 import { cls } from "../utils/misc";
 
 // copied from https://github.com/hi-ogawa/web-ext-tab-manager/blame/81710dead04859525b9c8be3a73a71926cae6da4/src/components/modal.tsx
@@ -47,9 +47,9 @@ function Modal(props: {
           leaveTo="opacity-0"
         />
         {/* content */}
-        <RemoveScroll
-          className="fixed inset-0 overflow-hidden flex justify-center items-center"
-          removeScrollBar={false}
+        <FloatingOverlay
+          lockScroll
+          className="flex justify-center items-center"
         >
           <Transition
             appear
@@ -72,7 +72,7 @@ function Modal(props: {
               {props.children}
             </div>
           </Transition>
-        </RemoveScroll>
+        </FloatingOverlay>
       </Transition>
     </FloatingPortal>
   );