fix: Reduce clickable area on star in document header, make entire line clickable to focus title

closes #2966

app/components/ContentEditable.tsx

@@ -5,6 +5,7 @@ import styled from "styled-components";
 type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
   disabled?: boolean;
   readOnly?: boolean;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
   onChange?: (text: string) => void;
   onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
   onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
@@ -36,6 +37,7 @@ const ContentEditable = React.forwardRef(
       placeholder,
       readOnly,
       dir,
+      onClick,
       ...rest
     }: Props,
     forwardedRef: React.RefObject<HTMLSpanElement>
@@ -80,7 +82,7 @@ const ContentEditable = React.forwardRef(
     }, [value, ref]);
 
     return (
-      <div className={className} dir={dir}>
+      <div className={className} dir={dir} onClick={onClick}>
         <Content
           ref={ref}
           contentEditable={!disabled && !readOnly}

app/scenes/Document/components/EditableTitle.tsx

@@ -48,6 +48,10 @@ const EditableTitle = React.forwardRef(
     const normalizedTitle =
       !value && readOnly ? document.titleWithDefault : value;
 
+    const handleClick = React.useCallback(() => {
+      ref.current?.focus();
+    }, [ref]);
+
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent) => {
         if (event.key === "Enter") {
@@ -112,6 +116,7 @@ const EditableTitle = React.forwardRef(
 
     return (
       <Title
+        onClick={handleClick}
         onChange={onChange}
         onKeyDown={handleKeyDown}
         placeholder={
@@ -139,7 +144,14 @@ const EditableTitle = React.forwardRef(
 const StarButton = styled(Star)`
   position: relative;
   top: 4px;
-  left: 4px;
+  left: 10px;
+  overflow: hidden;
+  width: 24px;
+
+  svg {
+    position: relative;
+    left: -4px;
+  }
 `;
 
 type TitleProps = {
@@ -161,6 +173,7 @@ const Title = styled(ContentEditable)<TitleProps>`
   border: 0;
   padding: 0;
   resize: none;
+  cursor: text;
 
   > span {
     outline: none;