Move icon above header on mobile (#10912)

app/scenes/Document/components/DocumentTitle.tsx

@@ -294,10 +294,8 @@ const StyledIconPicker = styled(IconPicker)`
 const Title = styled(ContentEditable)<TitleProps>`
   position: relative;
   line-height: ${lineHeight};
-  margin-top: 6vh;
+  margin-top: 10vh;
   margin-bottom: 0.5em;
-  margin-left: ${(props) =>
-    props.$containsIcon || props.$iconPickerIsOpen ? "40px" : "0px"};
   font-size: ${fontSize};
   font-weight: 600;
   border: 0;
@@ -319,8 +317,6 @@ const Title = styled(ContentEditable)<TitleProps>`
     css`
       &:focus-within,
       &:focus {
-        margin-left: 40px;
-
         ${PopoverButton} {
           opacity: 1 !important;
         }
@@ -333,13 +329,9 @@ const Title = styled(ContentEditable)<TitleProps>`
   }
 
   ${breakpoint("tablet")`
+    margin-top: 6vh;
     margin-left: 0;
 
-    &:focus-within,
-    &:focus {
-      margin-left: 0;
-    }
-
     &:hover {
       ${PopoverButton} {
         opacity: 0.5;

shared/components/Icon.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import { getLuminance } from "polished";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import useStores from "../hooks/useStores";
 import { IconType } from "../types";
 import { IconLibrary } from "../utils/IconLibrary";
@@ -113,15 +114,18 @@ export const IconTitleWrapper = styled(Flex)<{ dir?: string }>`
   align-items: center;
   justify-content: center;
   position: absolute;
-  top: 3px;
+  top: -44px;
   height: 40px;
   width: 40px;
 
   // Always move above TOC
   z-index: 1;
 
-  ${(props: { dir?: string }) =>
-    props.dir === "rtl" ? "right: -44px" : "left: -44px"};
+  ${breakpoint("tablet")`
+    top: 3px;
+    ${(props: { dir?: string }) =>
+      props.dir === "rtl" ? "right: -44px" : "left: -44px"};
+  `}
 `;
 
 const Span = styled(Flex)<{ size: number }>`