fix: Find and replace dialog should be fixed when scrolling

app/components/Popover.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Dialog } from "reakit/Dialog";
 import { Popover as ReakitPopover, PopoverProps } from "reakit/Popover";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
 import useKeyDown from "~/hooks/useKeyDown";
@@ -95,10 +95,13 @@ const Contents = styled.div<ContentsProps>`
   width: ${(props) => props.$width}px;
 
   ${(props) =>
-    props.$scrollable &&
+    props.$scrollable
-    css`
+      ? `
       overflow-x: hidden;
       overflow-y: auto;
+    `
+      : `
+      overflow: hidden;
     `}
 
   ${breakpoint("mobile", "tablet")`

app/editor/components/FindAndReplace.tsx

@@ -198,7 +198,7 @@ export default function FindAndReplace({ readOnly }: Props) {
 
   const style: React.CSSProperties = React.useMemo(
     () => ({
-      position: "absolute",
+      position: "fixed",
       left: "initial",
       top: 60,
       right: 16,
@@ -263,6 +263,7 @@ export default function FindAndReplace({ readOnly }: Props) {
         unstable_finalFocusRef={finalFocusRef}
         style={style}
         aria-label={t("Find and replace")}
+        scrollable={false}
         width={420}
       >
         <Content column>
@@ -365,4 +366,5 @@ const ButtonLarge = styled(ButtonSmall)`
 const Content = styled(Flex)`
   padding: 8px 0;
   margin-bottom: -16px;
+  position: static;
 `;