diff --git a/packages/core/ui.mjs b/packages/core/ui.mjs
index 141d3c83d..9343e062c 100644
--- a/packages/core/ui.mjs
+++ b/packages/core/ui.mjs
@@ -46,7 +46,5 @@ export const cleanupUi = () => {
   const container = document.getElementById('code');
   if (container) {
     container.style = '';
-    // TODO: find a way to remove that duplication..
-    container.className = 'grow flex text-gray-100 relative overflow-auto cursor-text pb-0'; // has to match App.tsx
   }
 };
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 1a73c4990..275b01975 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -127,6 +127,7 @@ export function Repl({ embedded = false }) {
     isAutoCompletionEnabled,
     isLineWrappingEnabled,
     panelPosition,
+    isZen,
   } = useSettings();
 
   const paintOptions = useMemo(() => ({ fontFamily }), [fontFamily]);
@@ -322,7 +323,7 @@ export function Repl({ embedded = false }) {
           </button>
         )}
         <div className="grow flex relative overflow-hidden">
-          <section className="text-gray-100 cursor-text pb-0 overflow-auto grow" id="code">
+          <section className={'text-gray-100 cursor-text pb-0 overflow-auto grow' + (isZen ? ' px-10' : '')} id="code">
             <CodeMirror
               theme={currentTheme}
               value={code}