From f309f39b5e302ea9727d0ce29d6f7ee65b228161 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom@getoutline.com>
Date: Sun, 14 Dec 2025 17:40:12 -0500
Subject: [PATCH] Move icon above header on mobile (#10912)

---
 app/scenes/Document/components/DocumentTitle.tsx | 12 ++----------
 shared/components/Icon.tsx                       | 10 +++++++---
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/app/scenes/Document/components/DocumentTitle.tsx b/app/scenes/Document/components/DocumentTitle.tsx
index 5b53bc061b..c60dd38299 100644
--- a/app/scenes/Document/components/DocumentTitle.tsx
+++ b/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;
diff --git a/shared/components/Icon.tsx b/shared/components/Icon.tsx
index c8c2bbd660..3117c883f9 100644
--- a/shared/components/Icon.tsx
+++ b/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 }>`