diff --git a/app/components/Popover.tsx b/app/components/Popover.tsx index eaa784c3c..268d75fec 100644 --- a/app/components/Popover.tsx +++ b/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` width: ${(props) => props.$width}px; ${(props) => - props.$scrollable && - css` + props.$scrollable + ? ` overflow-x: hidden; overflow-y: auto; + ` + : ` + overflow: hidden; `} ${breakpoint("mobile", "tablet")` diff --git a/app/editor/components/FindAndReplace.tsx b/app/editor/components/FindAndReplace.tsx index 0f5e9653b..a3ed0861f 100644 --- a/app/editor/components/FindAndReplace.tsx +++ b/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} > @@ -365,4 +366,5 @@ const ButtonLarge = styled(ButtonSmall)` const Content = styled(Flex)` padding: 8px 0; margin-bottom: -16px; + position: static; `;