fix: Documents on mobile horizontally scrollable
This commit is contained in:
@@ -11,6 +11,7 @@ import { RefHandle } from "~/components/ContentEditable";
|
|||||||
import Editor, { Props as EditorProps } from "~/components/Editor";
|
import Editor, { Props as EditorProps } from "~/components/Editor";
|
||||||
import Flex from "~/components/Flex";
|
import Flex from "~/components/Flex";
|
||||||
import useFocusedComment from "~/hooks/useFocusedComment";
|
import useFocusedComment from "~/hooks/useFocusedComment";
|
||||||
|
import useMobile from "~/hooks/useMobile";
|
||||||
import usePolicy from "~/hooks/usePolicy";
|
import usePolicy from "~/hooks/usePolicy";
|
||||||
import useStores from "~/hooks/useStores";
|
import useStores from "~/hooks/useStores";
|
||||||
import {
|
import {
|
||||||
@@ -47,6 +48,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
|
|||||||
const titleRef = React.useRef<RefHandle>(null);
|
const titleRef = React.useRef<RefHandle>(null);
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const match = useRouteMatch();
|
const match = useRouteMatch();
|
||||||
|
const isMobile = useMobile();
|
||||||
const focusedComment = useFocusedComment();
|
const focusedComment = useFocusedComment();
|
||||||
const { ui, comments, auth } = useStores();
|
const { ui, comments, auth } = useStores();
|
||||||
const { user, team } = auth;
|
const { user, team } = auth;
|
||||||
@@ -195,8 +197,8 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
|
|||||||
}
|
}
|
||||||
extensions={extensions}
|
extensions={extensions}
|
||||||
editorStyle={{
|
editorStyle={{
|
||||||
padding: "0 60px",
|
padding: isMobile ? "0 32px" : "0 64px",
|
||||||
margin: "0 -60px",
|
margin: isMobile ? "0 -32px" : "0 -64px",
|
||||||
paddingBottom: `calc(50vh - ${
|
paddingBottom: `calc(50vh - ${
|
||||||
childRef.current?.offsetHeight || 0
|
childRef.current?.offsetHeight || 0
|
||||||
}px)`,
|
}px)`,
|
||||||
|
|||||||
Reference in New Issue
Block a user