From 8bf891f8a3e5936196b22bfb689063f5d48c5603 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 24 Mar 2023 19:10:33 +0530
Subject: [PATCH] fix: Fixed issue where ordered list numbers in Super would
 get cut off when using monospace font

---
 .../Components/NoteView/FontFunctions.ts         |  1 +
 .../SuperEditor/Lexical/Theme/editor.scss        | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/javascripts/Components/NoteView/FontFunctions.ts b/packages/web/src/javascripts/Components/NoteView/FontFunctions.ts
index d1aced819..b50ec3185 100644
--- a/packages/web/src/javascripts/Components/NoteView/FontFunctions.ts
+++ b/packages/web/src/javascripts/Components/NoteView/FontFunctions.ts
@@ -6,4 +6,5 @@ export const reloadFont = (monospaceFont?: boolean) => {
   } else {
     root.style.setProperty(propertyName, 'var(--sn-stylekit-sans-serif-font)')
   }
+  document.documentElement.classList.toggle('monospace-font', monospaceFont)
 }
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/editor.scss b/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/editor.scss
index c9bffb4ce..20a0ce1e4 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/editor.scss
+++ b/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/editor.scss
@@ -268,37 +268,43 @@
   display: inline;
   background-color: #ffbbbb !important;
 }
+:root {
+  --lexical-ordered-list-left-margin: 16px;
+}
+.monospace-font {
+  --lexical-ordered-list-left-margin: 42px;
+}
 .Lexical__ol1 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
+  margin-left: var(--lexical-ordered-list-left-margin);
   list-style-position: outside;
 }
 .Lexical__ol2 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
+  margin-left: var(--lexical-ordered-list-left-margin);
   list-style-type: upper-alpha;
   list-style-position: outside;
 }
 .Lexical__ol3 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
+  margin-left: var(--lexical-ordered-list-left-margin);
   list-style-type: lower-alpha;
   list-style-position: outside;
 }
 .Lexical__ol4 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
+  margin-left: var(--lexical-ordered-list-left-margin);
   list-style-type: upper-roman;
   list-style-position: outside;
 }
 .Lexical__ol5 {
   padding: 0;
   margin: 0;
-  margin-left: 16px;
+  margin-left: var(--lexical-ordered-list-left-margin);
   list-style-type: lower-roman;
   list-style-position: outside;
 }