refactor(frontend): EditorParent line numbers

2 files changed, 10 insertions, 10 deletions

diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx
index 14294371..d4305610 100644
--- a/subprojects/frontend/src/editor/EditorArea.tsx
+++ b/subprojects/frontend/src/editor/EditorArea.tsx
@@ -134,13 +134,7 @@ function EditorArea(): JSX.Element {
   return (
     <EditorParent
       className="dark"
-      sx={{
-        '.cm-lineNumbers': editorStore.showLineNumbers
-          ? {}
-          : {
-              display: 'none !important',
-            },
-      }}
+      showLineNumbers={editorStore.showLineNumbers}
       ref={editorParentRef}
     />
   );
diff --git a/subprojects/frontend/src/editor/EditorParent.ts b/subprojects/frontend/src/editor/EditorParent.ts
index dbc35a0d..a4cdfa38 100644
--- a/subprojects/frontend/src/editor/EditorParent.ts
+++ b/subprojects/frontend/src/editor/EditorParent.ts
@@ -19,7 +19,8 @@ function underline(color: string) {
 
 export default styled('div', {
   name: 'EditorParent',
-})(({ theme }) => {
+  shouldForwardProp: (propName) => propName !== 'showLineNumbers',
+})<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => {
   const codeMirrorLintStyle: Record<string, unknown> = {};
   (['error', 'warning', 'info'] as const).forEach((severity) => {
     const color = theme.palette[severity].main;
@@ -77,8 +78,13 @@ export default styled('div', {
     '.cm-activeLineGutter': {
       background: 'transparent',
     },
-    '.cm-lineNumbers .cm-activeLineGutter': {
-      color: theme.palette.text.primary,
+    '.cm-lineNumbers': {
+      ...(!showLineNumbers && {
+        display: 'none !important',
+      }),
+      '.cm-activeLineGutter': {
+        color: theme.palette.text.primary,
+      },
     },
     '.cm-cursor, .cm-cursor-primary': {
       borderLeft: `2px solid ${theme.palette.primary.main}`,