improve editor padding

nodetec · Jul 7, 2024 · 6bae9e6 · 6bae9e6
1 parent c77d425
commit 6bae9e6
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/frontend/src/components/editor/Editor.tsx b/frontend/src/components/editor/Editor.tsx
@@ -54,7 +54,7 @@ const Editor = () => {
   });
 
   return (
-    <div className="h-full w-full overflow-auto pl-4" ref={editorRef}></div>
+    <div className="h-full w-full overflow-auto" ref={editorRef}></div>
   );
 };
 

diff --git a/frontend/src/components/editor/EditorWrapper.tsx b/frontend/src/components/editor/EditorWrapper.tsx
@@ -28,7 +28,7 @@ export const EditorWrapper = () => {
   }
 
   return (
-    <div className="flex h-full flex-col pt-10">
+    <div className="flex h-full flex-col pt-12">
       {!showPreview && <Editor />}
       {showPreview && <Preview />}
       <div className="fixed bottom-[3.75rem] right-2.5 p-2">

diff --git a/frontend/src/components/editor/Preview.tsx b/frontend/src/components/editor/Preview.tsx
@@ -8,10 +8,10 @@ export const Preview = () => {
   const { activeNote, activeTrashNote } = useAppState();
 
   return (
-    <div className="h-full w-full overflow-auto py-1 pl-4">
+    <div className="h-full w-full overflow-auto py-1">
       <MarkdownPreview
         source={activeNote?.Content || activeTrashNote?.Content || ""}
-        className="pl-1.5 pr-0.5"
+        className="px-8"
         rehypePlugins={rehypePlugins}
       />
     </div>

diff --git a/frontend/src/lib/codemirror/theme/dark.ts b/frontend/src/lib/codemirror/theme/dark.ts
@@ -8,6 +8,8 @@ const darkTheme = EditorView.theme({
   ".cm-content": {
     fontFamily: "monospace",
     lineHeight: "2",
+    paddingLeft: "2rem",
+    paddingRight: "2rem",
     caretColor: "white !important",
   },
   ".cm-gutters": {