@eventcatalog/core 3.29.1 → 3.30.0

package/eventcatalog/src/components/MDX/Accordion/AccordionGroup.astro

@@ -2,13 +2,21 @@
 
 ---
 
-<div class="accordian-group border border-gray-200 rounded-md shadow-xs accordion my-2">
+<div
+  class="accordion-group border border-[rgb(var(--ec-page-border))] rounded-lg overflow-hidden bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] my-3"
+>
   <slot />
 </div>
 
 <style is:global>
-  .accordian-group .accordion {
+  .accordion-group .accordion {
     border: none;
-    border-bottom: 1px solid #e2e8f0;
+    border-radius: 0;
+    box-shadow: none;
+    margin: 0;
+    background: transparent;
+  }
+  .accordion-group .accordion + .accordion {
+    border-top: 1px solid rgb(var(--ec-page-border));
   }
 </style>

package/eventcatalog/src/components/MDX/ResourceRef/ResourceRef.astro

@@ -248,15 +248,25 @@ const tooltipId = `ref-tooltip-${Math.random().toString(36).slice(2, 9)}`;
         <a
           href={href}
           class:list={[
-            'resource-ref-trigger underline decoration-dotted hover:decoration-solid underline-offset-2 font-medium transition-colors',
+            'resource-ref-trigger inline-flex items-center gap-1 px-1 -mx-1 rounded font-medium underline decoration-dotted decoration-2 underline-offset-[3px] transition-colors',
             isDeprecated
-              ? 'text-amber-600 decoration-amber-500/50'
-              : 'text-[rgb(var(--ec-accent))] hover:text-[rgb(var(--ec-accent-hover))]',
+              ? 'text-amber-700 dark:text-amber-400 decoration-amber-500/60'
+              : 'text-[rgb(var(--ec-accent-text))] decoration-[rgb(var(--ec-primary))] hover:bg-[rgb(var(--ec-accent-subtle))]',
           ]}
           data-tooltip-id={tooltipId}
         >
-          {resource?.data?.name || resourceId}
-          {isDeprecated && ' (deprecated)'}
+          <svg
+            class="w-3.5 h-3.5 flex-shrink-0 text-[rgb(var(--ec-primary))]"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="1.75"
+            set:html={iconPath}
+          />
+          <span>
+            {resource?.data?.name || resourceId}
+            {isDeprecated && ' (deprecated)'}
+          </span>
         </a>
         <span
           id={tooltipId}

package/eventcatalog/src/components/SchemaExplorer/ApiContentViewer.tsx

@@ -1,5 +1,10 @@
-import { ClipboardDocumentIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { ClipboardDocumentIcon, CheckIcon, GlobeAltIcon, DocumentTextIcon } from '@heroicons/react/24/outline';
 import { LockClosedIcon } from '@heroicons/react/24/solid';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { getLanguageForHighlight, getSchemaTypeLabel } from './utils';
+import { useDarkMode } from './useDarkMode';
 import type { SchemaItem } from './types';
 
 interface ApiContentViewerProps {
@@ -10,7 +15,14 @@ interface ApiContentViewerProps {
 }
 
 export default function ApiContentViewer({ message, onCopy, copiedId, apiAccessEnabled = false }: ApiContentViewerProps) {
-  // Generate API path based on collection type
+  const isDarkMode = useDarkMode();
+  const dividerColor = isDarkMode ? 'rgb(var(--ec-page-text-muted) / 0.13)' : 'rgb(var(--ec-page-border))';
+  const boxBorderColor = isDarkMode ? 'rgb(var(--ec-page-text-muted) / 0.17)' : 'rgb(var(--ec-page-border))';
+  const insetDividerColor = isDarkMode ? 'rgb(var(--ec-page-text-muted) / 0.11)' : 'rgb(var(--ec-page-border) / 0.8)';
+  const headingClass = 'text-sm font-semibold text-[rgb(var(--ec-page-text))]';
+  const labelClass = 'text-sm text-[rgb(var(--ec-page-text-muted))]';
+  const valueClass = 'text-sm text-[rgb(var(--ec-page-text-muted))]';
+
   let apiPath = '';
   if (message.collection === 'services') {
     const specType = message.specType || 'openapi';
@@ -20,17 +32,20 @@ export default function ApiContentViewer({ message, onCopy, copiedId, apiAccessE
   }
 
   const fullUrl = typeof window !== 'undefined' ? `${window.location.origin}${apiPath}` : apiPath;
-  const curlCommand = `curl ${fullUrl}`;
+  const exampleResponse = message.schemaContent || '{}';
+  const schemaTypeLabel = getSchemaTypeLabel(message.schemaExtension);
+  const lineCount = exampleResponse.split('\n').length;
+  const byteSize = new TextEncoder().encode(exampleResponse).length;
 
   if (!apiAccessEnabled) {
     return (
-      <div className="h-full flex items-center justify-center p-8">
+      <div className="flex h-full items-center justify-center p-8">
         <div className="max-w-md text-center">
-          <div className="flex items-center justify-center w-16 h-16 mx-auto mb-4 rounded-2xl bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-accent)/0.3)]">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl border border-[rgb(var(--ec-accent)/0.3)] bg-[rgb(var(--ec-accent-subtle))]">
             <LockClosedIcon className="h-8 w-8 text-[rgb(var(--ec-accent))]" />
           </div>
-          <h3 className="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">API Access</h3>
-          <p className="text-sm text-[rgb(var(--ec-page-text-muted))] mb-6">
+          <h3 className="mb-2 text-lg font-semibold text-[rgb(var(--ec-page-text))]">API Access</h3>
+          <p className="mb-6 text-sm text-[rgb(var(--ec-page-text-muted))]">
             Access your schemas programmatically via REST API. Perfect for CI/CD pipelines, automation, and integrations with your
             development workflow.
           </p>
@@ -38,94 +53,190 @@ export default function ApiContentViewer({ message, onCopy, copiedId, apiAccessE
             href="https://eventcatalog.cloud"
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-[rgb(var(--ec-accent))] rounded-lg hover:bg-[rgb(var(--ec-accent-hover))] transition-colors"
+            className="inline-flex items-center gap-2 rounded-lg bg-[rgb(var(--ec-accent))] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-[rgb(var(--ec-accent-hover))]"
           >
             Upgrade to Scale
             <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
             </svg>
           </a>
-          <p className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-3">Start your 14-day free trial</p>
+          <p className="mt-3 text-xs text-[rgb(var(--ec-page-text-muted))]">Start your 14-day free trial</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="h-full overflow-auto">
-      <div className="space-y-4">
-        {/* Endpoint */}
-        <div className="rounded-lg border border-[rgb(var(--ec-page-border))] overflow-hidden bg-[rgb(var(--ec-code-bg))]">
-          <div className="flex items-center justify-between px-4 py-2.5 border-b border-[rgb(var(--ec-page-border))]">
-            <div className="flex items-center gap-2">
-              <span className="px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-emerald-400 bg-emerald-400/10 rounded">
-                GET
-              </span>
-              <span className="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">Endpoint</span>
+    <div className="h-full overflow-auto pr-1">
+      <div className="space-y-4 pb-3">
+        <section className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-dropdown-bg)/0.66)]">
+          <div className="flex items-start justify-between gap-4 px-4 py-4">
+            <div className="min-w-0">
+              <div className="flex items-center gap-2">
+                <div className="flex h-6 w-6 items-center justify-center rounded-md bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]">
+                  <GlobeAltIcon className="h-3.5 w-3.5" />
+                </div>
+                <h3 className={headingClass}>HTTP Endpoint</h3>
+              </div>
+              <p className={`mt-2 ${labelClass}`}>
+                Use this endpoint to interact with the{' '}
+                <span className="text-[rgb(var(--ec-page-text))]">{message.data.name}</span>.
+              </p>
             </div>
             <CopyButton
-              label="Copy URL"
+              label="Copy"
               isCopied={copiedId === `${message.data.id}-url`}
               onClick={() => onCopy(fullUrl, `${message.data.id}-url`)}
+              borderColor={boxBorderColor}
+              variant="ghost"
             />
           </div>
-          <div className="px-4 py-3">
-            <code className="text-[13px] text-[rgb(var(--ec-page-text))] font-mono break-all leading-relaxed">{apiPath}</code>
+
+          <div className="px-4 pb-4">
+            <div
+              className="flex items-center gap-2 rounded-lg border bg-[rgb(var(--ec-content-hover)/0.45)] p-2"
+              style={{ borderColor: boxBorderColor }}
+            >
+              <span className="rounded-md bg-emerald-500/15 px-3 py-2 text-xs font-bold uppercase tracking-wide text-emerald-400">
+                GET
+              </span>
+              <code className="min-w-0 flex-1 truncate text-[13px] text-[rgb(var(--ec-page-text-muted))]">{apiPath}</code>
+            </div>
+
+            <div className="mt-4 pt-4">
+              <div className="mb-2 flex items-center gap-3">
+                <span className={labelClass}>Full URL</span>
+                <div className="h-px flex-1" style={{ backgroundColor: insetDividerColor }} />
+              </div>
+              <div className="flex items-center gap-4">
+                <code className="min-w-0 flex-1 break-all text-[13px] leading-relaxed text-[rgb(var(--ec-page-text-muted))]">
+                  {fullUrl}
+                </code>
+                <CopyButton
+                  label="Copy"
+                  isCopied={copiedId === `${message.data.id}-full-url`}
+                  onClick={() => onCopy(fullUrl, `${message.data.id}-full-url`)}
+                  borderColor={boxBorderColor}
+                />
+              </div>
+            </div>
           </div>
-        </div>
+        </section>
+
+        <section className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-dropdown-bg)/0.66)]">
+          <div className="px-4 py-4">
+            <h3 className={headingClass}>Response</h3>
+          </div>
+          <div className="border-t" style={{ borderColor: dividerColor }}>
+            <div className="flex items-center justify-between gap-4 px-4 py-3">
+              <span className={labelClass}>Content-Type</span>
+              <code
+                className="rounded-md border bg-[rgb(var(--ec-content-hover)/0.45)] px-2.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))]"
+                style={{ borderColor: boxBorderColor }}
+              >
+                application/json
+              </code>
+            </div>
+            <div className="flex items-center justify-between gap-4 border-t px-4 py-3" style={{ borderColor: dividerColor }}>
+              <span className={labelClass}>Returns</span>
+              <span className={valueClass}>Raw schema content</span>
+            </div>
+          </div>
+        </section>
 
-        {/* cURL */}
-        <div className="rounded-lg border border-[rgb(var(--ec-page-border))] overflow-hidden bg-[rgb(var(--ec-code-bg))]">
-          <div className="flex items-center justify-between px-4 py-2.5 border-b border-[rgb(var(--ec-page-border))]">
-            <span className="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">cURL</span>
+        <section className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-dropdown-bg)/0.66)]">
+          <div className="flex items-center justify-between gap-4 px-4 py-4">
+            <div className="flex items-center gap-2">
+              <div
+                className="flex h-6 w-6 items-center justify-center rounded-md border bg-[rgb(var(--ec-content-hover)/0.45)] text-[rgb(var(--ec-page-text-muted))]"
+                style={{ borderColor: boxBorderColor }}
+              >
+                <DocumentTextIcon className="h-3.5 w-3.5" />
+              </div>
+              <h3 className={headingClass}>Example Response</h3>
+            </div>
             <CopyButton
               label="Copy"
-              isCopied={copiedId === `${message.data.id}-curl`}
-              onClick={() => onCopy(curlCommand, `${message.data.id}-curl`)}
+              isCopied={copiedId === `${message.data.id}-response`}
+              onClick={() => onCopy(exampleResponse, `${message.data.id}-response`)}
+              borderColor={boxBorderColor}
+              variant="ghost"
             />
           </div>
-          <div className="px-4 py-3">
-            <code className="text-[13px] text-[rgb(var(--ec-page-text))] font-mono break-all leading-relaxed">
-              <span className="text-[rgb(var(--ec-accent))]">curl</span> {fullUrl}
-            </code>
-          </div>
-        </div>
 
-        {/* Response details */}
-        <div className="rounded-lg border border-[rgb(var(--ec-page-border))] overflow-hidden">
-          <div className="px-4 py-2.5 border-b border-[rgb(var(--ec-page-border))]">
-            <span className="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">Response</span>
+          <div className="border-t" style={{ borderColor: dividerColor }}>
+            <SyntaxHighlighter
+              language={getLanguageForHighlight(message.schemaExtension)}
+              style={isDarkMode ? oneDark : oneLight}
+              customStyle={{
+                margin: 0,
+                padding: '1rem 1.25rem',
+                borderRadius: 0,
+                fontSize: '0.8125rem',
+                lineHeight: '1.625',
+                background: 'transparent',
+              }}
+              showLineNumbers={true}
+              wrapLines={true}
+              wrapLongLines={true}
+            >
+              {exampleResponse}
+            </SyntaxHighlighter>
           </div>
-          <div className="divide-y divide-[rgb(var(--ec-page-border))]">
-            <div className="flex items-center justify-between px-4 py-2.5">
-              <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">Content-Type</span>
-              <code className="text-xs font-mono text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-content-hover))] px-2 py-0.5 rounded">
-                application/json
-              </code>
+
+          <div className="flex items-center justify-between gap-4 border-t px-4 py-3" style={{ borderColor: dividerColor }}>
+            <div className="inline-flex items-center gap-2 rounded-md bg-emerald-500/10 px-3 py-1.5 text-xs font-medium text-emerald-400">
+              <span className="h-2 w-2 rounded-full bg-emerald-400" />
+              Valid {schemaTypeLabel}
             </div>
-            <div className="flex items-center justify-between px-4 py-2.5">
-              <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">Returns</span>
-              <span className="text-xs text-[rgb(var(--ec-page-text))]">Raw schema content</span>
+            <div className="flex items-center gap-4 text-xs text-[rgb(var(--ec-page-text-muted))]">
+              <span>{lineCount} lines</span>
+              <span>{formatBytes(byteSize)}</span>
             </div>
           </div>
-        </div>
+        </section>
       </div>
     </div>
   );
 }
 
-function CopyButton({ label, isCopied, onClick }: { label: string; isCopied: boolean; onClick: () => void }) {
+function CopyButton({
+  label,
+  isCopied,
+  onClick,
+  borderColor,
+  variant = 'outline',
+}: {
+  label: string;
+  isCopied: boolean;
+  onClick: () => void;
+  borderColor: string;
+  variant?: 'outline' | 'ghost';
+}) {
+  const classes =
+    variant === 'ghost'
+      ? 'inline-flex items-center gap-2 rounded-md px-1 py-1 text-xs font-medium transition-colors'
+      : 'inline-flex items-center gap-2 rounded-md border px-3 py-2 text-xs font-medium transition-colors';
+
   return (
     <button
       onClick={onClick}
-      className={`inline-flex items-center gap-1 px-2 py-1 text-[11px] font-medium rounded transition-colors ${
+      style={variant === 'outline' ? { borderColor } : undefined}
+      className={`${classes} ${
         isCopied
           ? 'text-emerald-400'
-          : 'text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))]'
+          : 'text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover)/0.45)] hover:text-[rgb(var(--ec-page-text))]'
       }`}
     >
-      {isCopied ? <CheckIcon className="h-3 w-3" /> : <ClipboardDocumentIcon className="h-3 w-3" />}
+      {isCopied ? <CheckIcon className="h-3.5 w-3.5" /> : <ClipboardDocumentIcon className="h-3.5 w-3.5" />}
       {isCopied ? 'Copied' : label}
     </button>
   );
 }
+
+function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb.toFixed(1)} KB`;
+  return `${(kb / 1024).toFixed(1)} MB`;
+}

package/eventcatalog/src/components/SchemaExplorer/DiffViewer.tsx

@@ -118,7 +118,7 @@ export default function DiffViewer({ diffs, onOpenFullscreen, apiAccessEnabled =
   if (diffs.length === 0) return null;
 
   return (
-    <div className="h-full overflow-auto p-5">
+    <div className="h-full overflow-auto p-2">
       {isDark && <style dangerouslySetInnerHTML={{ __html: DIFF_DARK_STYLES }} />}
       <div className="mb-5 flex items-start justify-between">
         <div className="flex-1">

package/eventcatalog/src/components/SchemaExplorer/ExamplesViewer.tsx

@@ -73,9 +73,9 @@ export default function ExamplesViewer({ examples }: ExamplesViewerProps) {
       {/* Right: code + usage */}
       <div className="flex-1 flex flex-col min-w-0 overflow-auto">
         {/* Code window */}
-        <div className="flex flex-col rounded-lg border border-[rgb(var(--ec-page-border))] overflow-hidden bg-[rgb(var(--ec-code-bg))]">
+        <div className="flex flex-col rounded-lg border border-[rgb(var(--ec-page-border))] overflow-hidden bg-[rgb(var(--ec-dropdown-bg)/0.66)]">
           {/* Window title bar */}
-          <div className="flex items-center justify-between px-4 py-2.5 bg-[rgb(var(--ec-content-hover))] border-b border-[rgb(var(--ec-page-border))]">
+          <div className="flex items-center justify-between border-b border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-content-hover)/0.45)] px-4 py-2.5">
             <div className="flex items-center gap-3">
               <div className="flex items-center gap-1.5">
                 <div className="w-3 h-3 rounded-full bg-[#FF5F56]" />
@@ -121,8 +121,8 @@ export default function ExamplesViewer({ examples }: ExamplesViewerProps) {
         {/* Usage section */}
         {selected.usage && (
           <div className="flex-shrink-0 mt-3">
-            <div className="rounded-lg border border-[rgb(var(--ec-page-border))] overflow-hidden bg-[rgb(var(--ec-code-bg))]">
-              <div className="flex items-center justify-between px-4 py-2 bg-[rgb(var(--ec-content-hover))] border-b border-[rgb(var(--ec-page-border))]">
+            <div className="rounded-lg border border-[rgb(var(--ec-page-border))] overflow-hidden bg-[rgb(var(--ec-dropdown-bg)/0.66)]">
+              <div className="flex items-center justify-between border-b border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-content-hover)/0.45)] px-4 py-2">
                 <span className="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">Usage</span>
                 <button
                   onClick={() => handleCopy(selected.usage!, `usage-${selected.fileName}`)}

package/eventcatalog/src/components/SchemaExplorer/Pagination.tsx

@@ -10,26 +10,28 @@ export default function Pagination({ currentPage, totalPages, onPageChange }: Pa
   if (totalPages <= 1) return null;
 
   return (
-    <div className="flex-shrink-0 border-t border-[rgb(var(--ec-page-border))] px-3.5 py-2">
-      <div className="flex items-center justify-between">
+    <div className="flex-shrink-0 border-t border-[rgb(var(--ec-page-border))] px-5 py-4">
+      <div className="flex items-center justify-center gap-4">
         <button
           onClick={() => onPageChange(Math.max(1, currentPage - 1))}
           disabled={currentPage === 1}
-          className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed rounded-md hover:bg-[rgb(var(--ec-content-hover))] transition-colors"
+          className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-dropdown-bg))] text-[rgb(var(--ec-page-text-muted))] transition-colors hover:text-[rgb(var(--ec-page-text))] disabled:cursor-not-allowed disabled:opacity-30"
+          aria-label="Previous page"
         >
-          <ChevronLeftIcon className="h-3.5 w-3.5" />
-          Prev
+          <ChevronLeftIcon className="h-4 w-4" />
         </button>
-        <span className="text-xs tabular-nums text-[rgb(var(--ec-page-text-muted))]">
-          {currentPage} / {totalPages}
+
+        <span className="min-w-[5.5rem] text-center text-[12px] font-medium tabular-nums text-[rgb(var(--ec-page-text-muted))]">
+          {currentPage} of {totalPages}
         </span>
+
         <button
           onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
           disabled={currentPage === totalPages}
-          className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed rounded-md hover:bg-[rgb(var(--ec-content-hover))] transition-colors"
+          className="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-dropdown-bg))] text-[rgb(var(--ec-page-text-muted))] transition-colors hover:text-[rgb(var(--ec-page-text))] disabled:cursor-not-allowed disabled:opacity-30"
+          aria-label="Next page"
         >
-          Next
-          <ChevronRightIcon className="h-3.5 w-3.5" />
+          <ChevronRightIcon className="h-4 w-4" />
         </button>
       </div>
     </div>

package/eventcatalog/src/components/SchemaExplorer/SchemaContentViewer.tsx

@@ -5,7 +5,7 @@ import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { buildUrl } from '@utils/url-builder';
 import JSONSchemaViewer from './JSONSchemaViewer';
 import AvroSchemaViewer from './AvroSchemaViewer';
-import { getLanguageForHighlight, getSchemaTypeLabel, ICON_SPECS } from './utils';
+import { getLanguageForHighlight } from './utils';
 import type { SchemaItem } from './types';
 import { useDarkMode } from './useDarkMode';
 
@@ -50,96 +50,67 @@ export default function SchemaContentViewer({
     }
   }
 
-  const ext = message.schemaExtension?.toLowerCase() || '';
-  const iconSpec = ICON_SPECS[ext];
-  const filename = message.data.schemaPath
-    ? message.data.schemaPath.split('/').pop() || `${message.data.id}.${ext || 'json'}`
-    : `${message.data.id}.${ext || 'json'}`;
-
   return (
-    <div className="h-full flex flex-col rounded-lg border border-[rgb(var(--ec-page-border))] overflow-hidden bg-[rgb(var(--ec-code-bg))]">
-      {/* Window title bar */}
-      <div className="flex items-center justify-between px-4 py-2.5 bg-[rgb(var(--ec-content-hover))] border-b border-[rgb(var(--ec-page-border))]">
-        <div className="flex items-center gap-3">
-          {/* Traffic light dots */}
-          <div className="flex items-center gap-1.5">
-            <div className="w-3 h-3 rounded-full bg-[#FF5F56]" />
-            <div className="w-3 h-3 rounded-full bg-[#FFBD2E]" />
-            <div className="w-3 h-3 rounded-full bg-[#27C93F]" />
-          </div>
-
-          {/* Filename */}
-          <span className="text-xs font-mono text-[rgb(var(--ec-page-text-muted))]">{filename}</span>
-        </div>
+    <div className="relative flex h-full min-h-0 flex-col overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-code-bg))]">
+      <div className="pointer-events-none absolute right-4 top-4 z-10 flex items-center gap-1.5">
+        {message.collection === 'services' &&
+          (() => {
+            const specType = message.specType || 'openapi';
+            const specFilename = message.specFilenameWithoutExtension || 'schema';
 
-        {/* Action buttons */}
-        <div className="flex items-center gap-1.5">
-          {message.collection === 'services' &&
-            (() => {
-              const specType = message.specType || 'openapi';
-              const specFilename = message.specFilenameWithoutExtension || 'schema';
+            let urlSegment = 'spec';
+            if (specType === 'asyncapi') {
+              urlSegment = 'asyncapi';
+            } else if (specType === 'graphql') {
+              urlSegment = 'graphql';
+            }
 
-              let urlSegment = 'spec';
-              if (specType === 'asyncapi') {
-                urlSegment = 'asyncapi';
-              } else if (specType === 'graphql') {
-                urlSegment = 'graphql';
-              }
+            const specUrl = buildUrl(`/docs/services/${message.data.id}/${message.data.version}/${urlSegment}/${specFilename}`);
 
-              const specUrl = buildUrl(`/docs/services/${message.data.id}/${message.data.version}/${urlSegment}/${specFilename}`);
-
-              return (
-                <a
-                  href={specUrl}
-                  className="inline-flex items-center gap-1 px-2 py-1 text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-page-bg)/0.5)] hover:text-[rgb(var(--ec-page-text))] rounded transition-colors"
-                  title="View full specification"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-3 w-3"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                    />
-                  </svg>
-                  View Spec
-                </a>
-              );
-            })()}
-          {onOpenFullscreen && (
-            <button
-              onClick={onOpenFullscreen}
-              className="inline-flex items-center p-1 text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-page-bg)/0.5)] hover:text-[rgb(var(--ec-page-text))] rounded transition-colors"
-              title="Open in fullscreen"
-            >
-              <ArrowsPointingOutIcon className="h-3.5 w-3.5" />
-            </button>
-          )}
+            return (
+              <a
+                href={specUrl}
+                className="pointer-events-auto inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-content-hover)/0.9)] px-2 py-1 text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] backdrop-blur-xs transition-colors hover:bg-[rgb(var(--ec-page-bg)/0.75)] hover:text-[rgb(var(--ec-page-text))]"
+                title="View full specification"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                  />
+                </svg>
+                View Spec
+              </a>
+            );
+          })()}
+        {onOpenFullscreen && (
           <button
-            onClick={onCopy}
-            className="inline-flex items-center gap-1 px-2 py-1 text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-page-bg)/0.5)] hover:text-[rgb(var(--ec-page-text))] rounded transition-colors"
-            title="Copy code"
+            onClick={onOpenFullscreen}
+            className="pointer-events-auto inline-flex items-center rounded-md bg-[rgb(var(--ec-content-hover)/0.9)] p-1.5 text-[rgb(var(--ec-page-text-muted))] backdrop-blur-xs transition-colors hover:bg-[rgb(var(--ec-page-bg)/0.75)] hover:text-[rgb(var(--ec-page-text))]"
+            title="Open in fullscreen"
           >
-            <ClipboardDocumentIcon className="h-3 w-3" />
-            {isCopied ? 'Copied!' : 'Copy'}
+            <ArrowsPointingOutIcon className="h-3.5 w-3.5" />
           </button>
-        </div>
+        )}
+        <button
+          onClick={onCopy}
+          className="pointer-events-auto inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-content-hover)/0.9)] px-2 py-1.5 text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] backdrop-blur-xs transition-colors hover:bg-[rgb(var(--ec-page-bg)/0.75)] hover:text-[rgb(var(--ec-page-text))]"
+          title="Copy code"
+        >
+          <ClipboardDocumentIcon className="h-3 w-3" />
+          {isCopied ? 'Copied!' : 'Copy'}
+        </button>
       </div>
 
-      {/* Code content */}
-      <div className="flex-1 overflow-auto">
+      <div className="min-h-0 flex-1 overflow-auto">
         <SyntaxHighlighter
           language={getLanguageForHighlight(message.schemaExtension)}
           style={isDarkMode ? oneDark : oneLight}
           customStyle={{
             margin: 0,
-            padding: '1rem 1.25rem',
+            padding: '1.25rem',
             borderRadius: 0,
             fontSize: '0.8125rem',
             lineHeight: '1.625',