Desktop: Made editor padding more consistent and ensure it is present even when sidebars are gone

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 */

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>

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,

packages/lib/theme.ts

@@ -61,6 +61,7 @@ const globalStyle: any = {
 	appearance: 'light',
 	mainPadding: 12,
 	topRowHeight: 50,
+	editorPaddingLeft: 8,
 };
 
 globalStyle.marginRight = globalStyle.margin;

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;
 		}
 
 		/*