yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Focusing shared document title on mobile causes it to move

Browse Source
This commit is contained in:
Tom Moor
2024-07-07 19:56:31 -04:00
parent 4654dfb658
commit ddd103542a
1 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/scenes/Document/components/DocumentTitle.tsx
View File

@@ -4,7 +4,7 @@ import { Selection } from "prosemirror-state";
import { __parseFromClipboard } from "prosemirror-view"; import { __parseFromClipboard } from "prosemirror-view";
import * as React from "react"; import * as React from "react";
import { mergeRefs } from "react-merge-refs"; import { mergeRefs } from "react-merge-refs";
import styled from "styled-components"; import styled, { css } from "styled-components";
import breakpoint from "styled-components-breakpoint"; import breakpoint from "styled-components-breakpoint";
import isMarkdown from "@shared/editor/lib/isMarkdown"; import isMarkdown from "@shared/editor/lib/isMarkdown";
import normalizePastedMarkdown from "@shared/editor/lib/markdown/normalize"; import normalizePastedMarkdown from "@shared/editor/lib/markdown/normalize";
@@ -281,6 +281,7 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
type TitleProps = { type TitleProps = {
$containsIcon: boolean; $containsIcon: boolean;
$iconPickerIsOpen: boolean; $iconPickerIsOpen: boolean;
readOnly?: boolean;
}; };
// Extra area prevents gap between icon and beginning of title // Extra area prevents gap between icon and beginning of title
@@ -311,14 +312,18 @@ const Title = styled(ContentEditable)<TitleProps>`
opacity: 1; opacity: 1;
} }
&:focus-within, ${(props: TitleProps) =>
&:focus { !props.readOnly &&
margin-left: 40px; css`
&:focus-within,
&:focus {
margin-left: 40px;
${PopoverButton} { ${PopoverButton} {
opacity: 1 !important; opacity: 1 !important;
} }
} }
`};
${PopoverButton} { ${PopoverButton} {
opacity: ${(props: TitleProps) => opacity: ${(props: TitleProps) =>