From 0e57baf5b9f5bea1d6228140b88c99772ca6123f Mon Sep 17 00:00:00 2001
From: Laurent Cozic <laurent@cozic.net>
Date: Sat, 2 Jan 2021 17:27:37 +0000
Subject: [PATCH] Desktop: Made editor padding more consistent and ensure it is
 present even when sidebars are gone

---
 .../gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx    | 6 ++++++
 packages/app-desktop/gui/NoteEditor/NoteEditor.tsx       | 9 ++++++---
 .../gui/NoteEditor/NoteTitle/NoteTitleBar.tsx            | 2 +-
 packages/lib/theme.ts                                    | 1 +
 packages/renderer/noteStyle.ts                           | 2 +-
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
index 65aa5a9ab0..198c8a4a7d 100644
--- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
+++ b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
@@ -387,6 +387,12 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 				padding-bottom: 400px !important;
 			}
 
+			/* Left padding is applied at the editor component level, so we should remove it from the lines */
+			.CodeMirror pre.CodeMirror-line,
+			.CodeMirror pre.CodeMirror-line-like {
+				padding-left: 0;
+			}
+
 			.CodeMirror-sizer {
 				/* Add a fixed right padding to account for the appearance (and disappearance) */
 				/* of the sidebar */
diff --git a/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx b/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx
index 92801b1067..8201bc2976 100644
--- a/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx
+++ b/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx
@@ -498,9 +498,10 @@ function NoteEditor(props: NoteEditorProps) {
 	}
 
 	function renderSearchInfo() {
+		const theme = themeStyle(props.themeId);
 		if (formNoteFolder && ['Search', 'Tag', 'SmartFilter'].includes(props.notesParentType)) {
 			return (
-				<div style={{ paddingTop: 10, paddingBottom: 10 }}>
+				<div style={{ paddingTop: 10, paddingBottom: 10, paddingLeft: theme.editorPaddingLeft }}>
 					<Button
 						iconName="icon-notebooks"
 						level={ButtonLevel.Primary}
@@ -525,6 +526,8 @@ function NoteEditor(props: NoteEditorProps) {
 		return renderNoNotes(styles.root);
 	}
 
+	const theme = themeStyle(props.themeId);
+
 	return (
 		<div style={styles.root} onDrop={onDrop}>
 			<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
@@ -539,13 +542,13 @@ function NoteEditor(props: NoteEditorProps) {
 					onTitleChange={onTitleChange}
 				/>
 				{renderSearchInfo()}
-				<div style={{ display: 'flex', flex: 1 }}>
+				<div style={{ display: 'flex', flex: 1, paddingLeft: theme.editorPaddingLeft }}>
 					{editor}
 				</div>
 				<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
 					{renderSearchBar()}
 				</div>
-				<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', height: 40 }}>
+				<div style={{ paddingLeft: theme.editorPaddingLeft, display: 'flex', flexDirection: 'row', alignItems: 'center', height: 40 }}>
 					{renderTagButton()}
 					{renderTagBar()}
 				</div>
diff --git a/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx b/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx
index 962d43a51e..8af2d6777c 100644
--- a/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx
+++ b/packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx
@@ -11,6 +11,7 @@ const StyledRoot = styled.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
+	padding-left: ${props => props.theme.editorPaddingLeft}px;
 
 	@media (max-width: 800px) {
 		flex-direction: column;
@@ -52,7 +53,6 @@ function styles_(props: Props) {
 				paddingBottom: 5,
 				paddingLeft: 0,
 				paddingRight: 8,
-				marginLeft: 5,
 				color: theme.textStyle.color,
 				fontSize: Math.round(theme.textStyle.fontSize * 1.5),
 				backgroundColor: theme.backgroundColor,
diff --git a/packages/lib/theme.ts b/packages/lib/theme.ts
index 0490125ee8..03d607f4c9 100644
--- a/packages/lib/theme.ts
+++ b/packages/lib/theme.ts
@@ -61,6 +61,7 @@ const globalStyle: any = {
 	appearance: 'light',
 	mainPadding: 12,
 	topRowHeight: 50,
+	editorPaddingLeft: 8,
 };
 
 globalStyle.marginRight = globalStyle.margin;
diff --git a/packages/renderer/noteStyle.ts b/packages/renderer/noteStyle.ts
index 4f5ba044c4..520995785d 100644
--- a/packages/renderer/noteStyle.ts
+++ b/packages/renderer/noteStyle.ts
@@ -307,7 +307,7 @@ export default function(theme: any) {
 
 		.mce-content-body {
 			/* Note: we give a bit more padding at the bottom, to allow scrolling past the end of the document */
-			padding: 5px 10px 10em 10px;
+			padding: 5px 10px 10em 0;
 		}
 
 		/*