chore: Use proper code styleing/formatting

Update code editor to use proper yaml formatting output

Author: sparkison

src/components/ComposeWizard/index.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import clsx from 'clsx';
+import CodeBlock from '@theme/CodeBlock';
 import {
   DEPLOYMENT_TYPES,
   WIZARD_SECTIONS,
@@ -305,9 +306,13 @@ const LivePreview = ({ code, filename, envCode }) => {
         </div>
       </div>
       <div className={styles.previewContent}>
-        <pre className={styles.codeBlock}>
-          <code>{activeTab === 'compose' ? code : envCode}</code>
-        </pre>
+        <CodeBlock
+          language={activeTab === 'compose' ? 'yaml' : 'bash'}
+          className={styles.codeBlock}
+          showLineNumbers
+        >
+          {activeTab === 'compose' ? code : envCode}
+        </CodeBlock>
       </div>
     </div>
   );

src/components/ComposeWizard/styles.module.css

@@ -393,18 +393,27 @@
   min-height: 0;
 }
 
+/* CodeBlock wrapper styling */
 .codeBlock {
-  margin: 0;
-  padding: 1rem;
-  background: #0f172a;
-  color: #e2e8f0;
-  font-size: 0.8rem;
-  line-height: 1.5;
+  margin: 0 !important;
+  border-radius: 0 !important;
   min-height: 100%;
-  white-space: pre;
-  word-break: keep-all;
-  overflow-wrap: normal;
-  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
+}
+
+.codeBlock pre {
+  margin: 0 !important;
+  border-radius: 0 !important;
+  font-size: 0.8rem !important;
+  line-height: 1.6 !important;
+}
+
+.codeBlock code {
+  font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', 'Monaco', monospace !important;
+}
+
+/* Hide the default copy button since we have our own */
+.codeBlock button[class*="copyButton"] {
+  display: none !important;
 }
 
 /* Quick Start */