minor updates

Author: sweta1308

public/globals.css

@@ -911,154 +911,6 @@ article iframe,
   color: #414651 !important;
 }
 
-/* YAML styles */
-
-.split-layout {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2rem;
-  margin: 2rem 0;
-}
-
-@media (max-width: 768px) {
-  .split-layout {
-    grid-template-columns: 1fr;
-  }
-}
-
-.content-panel {
-  padding-right: 1rem;
-}
-
-.content-section {
-  padding: 1rem 1.25rem;
-  margin-bottom: 0.75rem;
-  border-left: 4px solid transparent;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.content-section:hover {
-  border-left-color: #e5e7eb;
-  background-color: #f9fafb;
-}
-
-.content-section.active {
-  border-left-color: #cd3c4d;
-  background-color: #fef2f2;
-}
-
-.content-section h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.content-section p {
-  margin-bottom: 1rem;
-  line-height: 1.6;
-}
-
-.content-section p:first-of-type {
-  margin-top: 0;
-}
-
-.content-section div {
-  margin-bottom: 1.5rem;
-}
-
-.content-section div:last-child,
-.content-section p:last-child {
-  margin-bottom: 0;
-}
-
-/* hide top-level test copy button */
-[data-testid="copy-code-button"] {
-  display: none !important;
-}
-
-/* CodePanel */
-.code-panel {
-  position: sticky;
-  top: 8rem;
-  align-self: flex-start;
-  max-height: calc(100vh - 8rem);
-  border-radius: 0.5rem;
-  overflow: hidden;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-.code-header {
-  background: #0c1e3d;
-  color: #e2e8f0;
-  padding: 0.75rem 1rem;
-  font-family: monospace;
-  font-size: 0.875rem;
-  border-bottom: 1px solid #0a1628;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.copy-btn {
-  background: #1e293b;
-  border: 1px solid #334155;
-  padding: 4px 6px;
-  border-radius: 4px;
-  color: #e2e8f0;
-  cursor: pointer;
-  transition: background 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.copy-btn:hover {
-  background: #334155;
-}
-
-.copy-btn svg {
-  width: 16px;
-  height: 16px;
-}
-
-.copy-btn[data-copied="true"] .icon-copy {
-  display: none;
-}
-
-.copy-btn[data-copied="false"] .icon-check {
-  display: none;
-}
-
-.code-content {
-  background: #0c1e3d;
-  overflow-y: auto;
-  max-height: calc(100vh - 10rem);
-  position: relative;
-}
-
-.code-content *:not(.line-highlight) {
-  background: #0c1e3d !important;
-  border: none !important;
-}
-
-.code-content pre {
-  margin: 0 !important;
-  padding: 14px 16px !important;
-  border-radius: 0 !important;
-}
-
-.line-highlight {
-  position: absolute;
-  left: 0;
-  right: 0;
-  background: #1e3a5f;
-  border-left: 3px solid #cd3c4d;
-  pointer-events: none;
-  z-index: 1;
-}
-
 #chat-assistant-sheet {
   margin-top: 2rem !important;
   min-height: 90% !important;

snippets/components/CodePreview.jsx

@@ -1,9 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import './CodePreview.css';
 
-/* ------------------------------
- * Layout wrapper
- * ----------------------------- */
 export const CodePreview = ({ children }) => {
   const [instanceId] = useState(
     () => `preview-${Math.random().toString(36).slice(2)}`
@@ -41,9 +38,6 @@ export const ContentSection = ({ id, title, lines, children }) => (
   </div>
 );
 
-/* ------------------------------
- * Code panel
- * ----------------------------- */
 export const CodePanel = ({
   children,
   fileName = 'config.yaml',
@@ -54,9 +48,6 @@ export const CodePanel = ({
   const isProgrammaticScroll = useRef(false);
   const hoverTimeout = useRef(null);
 
-  /* ----------------------------------------------------
-   * STEP 1: Wait for Mintlify MDX <pre> and wrap lines
-   * -------------------------------------------------- */
   useEffect(() => {
     let tries = 0;
 
@@ -98,9 +89,7 @@ export const CodePanel = ({
     wrapLines();
   }, [children, showLineNumbers]);
 
-  /* ----------------------------------------------------
-   * STEP 2: Highlight + sync logic
-   * -------------------------------------------------- */
+  // Highlight logic
   useEffect(() => {
     const panel = codePanelRef.current;
     const content = codeContentRef.current;
@@ -208,9 +197,6 @@ export const CodePanel = ({
     waitForLines();
   }, []);
 
-  /* ----------------------------------------------------
-   * Copy handler
-   * -------------------------------------------------- */
   const handleCopy = (e) => {
     const btn = e.currentTarget;
     const text =