diff --git a/packages/console/src/ds-components/CodeEditor/index.module.scss b/packages/console/src/ds-components/CodeEditor/index.module.scss
index 4db22b495..aa195112f 100644
--- a/packages/console/src/ds-components/CodeEditor/index.module.scss
+++ b/packages/console/src/ds-components/CodeEditor/index.module.scss
@@ -59,10 +59,12 @@
       overflow: hidden;
     }
 
-    textarea,
-    pre {
-      display: flex;
-      min-height: 80px;
+    &:not(.readonly) {
+      textarea,
+      pre {
+        display: flex;
+        min-height: 80px;
+      }
     }
   }
 
diff --git a/packages/console/src/ds-components/CodeEditor/index.tsx b/packages/console/src/ds-components/CodeEditor/index.tsx
index 0493b0c3b..fbd7a5133 100644
--- a/packages/console/src/ds-components/CodeEditor/index.tsx
+++ b/packages/console/src/ds-components/CodeEditor/index.tsx
@@ -87,7 +87,7 @@ function CodeEditor({
       <div className={classNames(styles.container, className)}>
         {isShowingPlaceholder && <div className={styles.placeholder}>{placeholder}</div>}
         <CopyToClipboard value={value ?? ''} variant="icon" className={styles.copy} />
-        <div ref={editorRef} className={styles.editor}>
+        <div ref={editorRef} className={classNames(styles.editor, isReadonly && styles.readonly)}>
           {/* SyntaxHighlighter is a readonly component, so a transparent <textarea> layer is needed
       in order to support user interactions, such as code editing, copy-pasting, etc. */}
           <textarea