@eventcatalog/core 3.29.1 → 3.30.0

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/[docType]/[docId]/index.astro

@@ -3,9 +3,10 @@ import { render } from 'astro:content';
 
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import components from '@components/MDX/components';
+import CopyAsMarkdown from '@components/CopyAsMarkdown';
 import { buildUrl } from '@utils/url-builder';
 import { AlignLeftIcon, HistoryIcon } from 'lucide-react';
-import { isResourceDocsEnabled } from '@utils/feature';
+import { isEventCatalogChatEnabled, isResourceDocsEnabled } from '@utils/feature';
 import { getIcon } from '@utils/badges';
 import { collectionToResourceMap } from '@utils/collections/util';
 
@@ -33,6 +34,8 @@ const docsBasePath = `/docs/${props.data.resourceCollection}/${props.data.resour
 const singularResourceName =
   collectionToResourceMap[props.data.resourceCollection as keyof typeof collectionToResourceMap] ??
   props.data.resourceCollection.slice(0, props.data.resourceCollection.length - 1);
+const chatEnabled = isEventCatalogChatEnabled();
+const chatQuery = `Tell me about the ${props.data.type} doc "${title}" for ${props.data.resourceId} (version ${props.data.version})`;
 
 const pagefindAttributes =
   props.data.version === props.data.latestVersion
@@ -44,35 +47,37 @@ const pagefindAttributes =
 ---
 
 <VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
-  <main class="flex docs-layout h-full bg-[rgb(var(--ec-page-bg))]" {...pagefindAttributes}>
-    <div class="flex docs-layout w-full pl-16">
-      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8 bg-[rgb(var(--ec-page-bg))]">
-        <div class="border-b border-[rgb(var(--ec-page-border))] pb-4">
-          <p class="text-xs uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
-            <a
-              href={buildUrl(`/docs/${props.data.resourceCollection}/${props.data.resourceId}/${props.data.resourceVersion}`)}
-              class="hover:underline"
-            >
-              {singularResourceName}: {props.data.resourceId}
-            </a>
-          </p>
-          <div class="flex items-center gap-2 pt-1">
-            <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{title}</h2>
-            <span
-              class="text-xs rounded-md px-2 py-1 bg-[rgb(var(--ec-content-hover))] text-[rgb(var(--ec-page-text-muted))] border border-[rgb(var(--ec-page-border))]"
-            >
-              v{props.data.version}
-              {props.data.version === props.data.latestVersion && ' (latest)'}
-            </span>
+  <main class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]" {...pagefindAttributes}>
+    <div class="flex docs-layout w-full">
+      <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
+        <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-2">
+          <div>
+            <div class="flex justify-between items-center">
+              <div class="flex items-center gap-2">
+                <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{title}</h2>
+              </div>
+              <div class="hidden lg:block">
+                <CopyAsMarkdown
+                  client:only="react"
+                  schemas={[]}
+                  chatQuery={chatQuery}
+                  chatEnabled={chatEnabled}
+                  editUrl=""
+                  markdownDownloadEnabled={true}
+                  rssFeedEnabled={false}
+                  preferChatAsDefault={false}
+                />
+              </div>
+            </div>
           </div>
           {
             props.data.summary && (
-              <p class="text-lg pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</p>
+              <p class="text-base pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</p>
             )
           }
           {
             badges.length > 0 && (
-              <div class="flex flex-wrap gap-3 pt-4">
+              <div class="flex flex-wrap gap-3 py-4">
                 {badges.map((badge: any) => (
                   <span
                     class={`
@@ -128,23 +133,26 @@ const pagefindAttributes =
           <Content components={components(props)} />
         </div>
       </div>
-      <aside class="hidden lg:block sticky top-0 pb-10 w-80 overflow-y-auto border-l border-[rgb(var(--ec-page-border))] py-2">
-        <div class="sticky top-28 left-0 h-full overflow-y-auto px-6 py-4">
-          <h3 class="text-sm text-[rgb(var(--ec-page-text))] font-semibold capitalize flex items-center gap-2">
+      <aside
+        class="hidden xl:block sticky top-[4rem] self-start w-[280px] max-h-[calc(100vh-4rem)] overflow-y-auto py-2 flex-shrink-0 pr-10 bg-[rgb(var(--ec-page-bg))]"
+      >
+        <div class="mt-8 space-y-8">
+          <h3 class="text-xs text-[rgb(var(--ec-page-text))] font-semibold capitalize flex items-center gap-2 mb-4">
             <AlignLeftIcon className="w-4 h-4" />
             On this page
           </h3>
-          <nav class="space-y-1 text-sm py-4">
+          <nav class="text-xs border-l border-[rgb(var(--ec-page-border))]">
             {
               headings.map((heading) => {
+                const level = heading.depth > 2 ? heading.depth : 1;
                 if (heading.depth > 3) {
                   return null;
                 }
                 return (
                   <a
                     href={`#${heading.slug}`}
-                    class={`block text-[12px] py-0.5 ${heading.depth === 1 ? 'font-light' : ''} text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]`}
-                    style={`padding-left: ${(heading.depth - 1) * 8}px`}
+                    class={`block py-1.5 pr-2.5 leading-5 text-[rgb(var(--ec-page-text-muted))] hover:border-[rgb(var(--ec-page-border))] hover:text-[rgb(var(--ec-page-text))] border-l-2 border-transparent -ml-px transition-all duration-200`}
+                    style={`padding-left: ${level * 0.75}rem`}
                   >
                     {heading.text}
                   </a>
@@ -189,7 +197,99 @@ const pagefindAttributes =
     overflow: auto;
   }
 
+  .toc-active-text {
+    color: rgb(var(--ec-accent));
+  }
+
+  .toc-active-border {
+    border-color: rgb(var(--ec-accent));
+  }
+
   .version-item:hover {
     background: linear-gradient(to left, rgb(var(--ec-accent-gradient-from)), rgb(var(--ec-accent-gradient-to)));
   }
 </style>
+
+<script>
+  // @ts-nocheck
+  function setupObserver() {
+    try {
+      const observerOptions = {
+        rootMargin: '0px 0px -40% 0px',
+        threshold: 0.1,
+      };
+
+      let observerPaused = false;
+
+      function highlightTocItem(id) {
+        document.querySelectorAll('.active-toc-item').forEach((link) => {
+          link.classList.remove('active-toc-item', 'toc-active-text', 'font-medium', 'toc-active-border');
+          link.classList.add('border-transparent');
+        });
+
+        const tocLink = document.querySelector(`nav a[href="#${id}"]`);
+        if (tocLink) {
+          tocLink.classList.add('active-toc-item', 'toc-active-text', 'font-medium', 'toc-active-border');
+          tocLink.classList.remove('border-transparent');
+
+          setTimeout(() => {
+            tocLink.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+          }, 10);
+        }
+      }
+
+      const observer = new IntersectionObserver((entries) => {
+        if (observerPaused) return;
+
+        entries.forEach((entry) => {
+          const id = entry.target.getAttribute('id');
+          if (entry.isIntersecting && id) {
+            highlightTocItem(id);
+          }
+        });
+      }, observerOptions);
+
+      const prose = document.querySelector('.prose');
+      if (!prose) return;
+
+      const headings = prose.querySelectorAll('h1[id], h2[id], h3[id]');
+
+      if (headings.length > 0) {
+        headings.forEach((heading) => observer.observe(heading));
+      } else {
+        const allHeadings = prose.querySelectorAll('h1, h2, h3');
+        allHeadings.forEach((heading) => {
+          if (!heading.id) {
+            const text = heading.textContent || '';
+            heading.id = text
+              .toLowerCase()
+              .replace(/[^\w\s-]/g, '')
+              .replace(/\s+/g, '-');
+          }
+          observer.observe(heading);
+        });
+      }
+
+      const tocLinks = document.querySelectorAll('nav a[href^="#"]');
+      tocLinks.forEach((link) => {
+        link.addEventListener('click', () => {
+          const hrefAttr = link.getAttribute('href');
+          if (!hrefAttr) return;
+
+          const id = hrefAttr.substring(1);
+          highlightTocItem(id);
+
+          observerPaused = true;
+          setTimeout(() => {
+            observerPaused = false;
+          }, 1000);
+        });
+      });
+    } catch (error) {
+      console.error('Error setting up TOC observer:', error);
+    }
+  }
+
+  setupObserver();
+  document.addEventListener('astro:page-load', setupObserver);
+</script>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/asyncapi/[filename].astro

@@ -149,7 +149,11 @@ const pagefindAttributes =
 ---
 
 <VerticalSideBarLayout title={pageTitle}>
-  <div {...pagefindAttributes} class="relative">
+  <div
+    {...pagefindAttributes}
+    class="relative"
+    style="margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1);"
+  >
     {
       // Currently, Pagefind does not index metadata (such as the title),
       // so we need to ensure it is included as text on the page.
@@ -173,7 +177,7 @@ const pagefindAttributes =
         </div>
       )
     }
-    <div id="asyncapi" class="not-prose md:pr-14" set:html={renderedComponent} />
+    <div id="asyncapi" class="not-prose" set:html={renderedComponent} />
   </div>
 </VerticalSideBarLayout>
 

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/examples/[...filename].astro

@@ -16,9 +16,9 @@ const lang = getLanguageForHighlight(example.extension);
 ---
 
 <VerticalSideBarLayout title={pageTitle} description={`Example: ${example.title} for ${data.name}`}>
-  <main class="flex sm:px-8 docs-layout h-full">
+  <main class="flex sm:px-8 docs-layout min-h-full">
     <div class="flex docs-layout w-full">
-      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
+      <div class="w-full lg:mr-2 pr-8 py-8">
         <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-4">
           <h1 class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))] mb-2">
             {example.title}

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/graphql/[filename].astro

@@ -64,10 +64,10 @@ const pagefindAttributes =
 ---
 
 <VerticalSideBarLayout title={pageTitle} description={`GraphQL schema for ${data.name}`}>
-  <main class="flex sm:px-8 docs-layout h-full" {...pagefindAttributes}>
+  <main class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]" {...pagefindAttributes}>
     <div class="flex docs-layout w-full">
-      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
-        <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-4">
+      <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
+        <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-2">
           <div>
             <div class="flex justify-between items-start">
               <div class="flex-1">
@@ -82,21 +82,24 @@ const pagefindAttributes =
             {
               badges && (
                 <div class="flex flex-wrap gap-3 py-4">
-                  {badges.map((badge: any) => (
-                    <span
-                      id={badge.id || ''}
-                      class={`
-                        inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                        bg-${badge.backgroundColor || 'gray'}-500/10 border border-${badge.backgroundColor || 'gray'}-500/20
-                        text-${badge.textColor || 'gray'}-500
-                        shadow-xs transition-all duration-200 ease-out
-                      `}
-                    >
-                      {badge.icon && <badge.icon className={`w-4 h-4 flex-shrink-0`} />}
-                      {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}
-                      <span>{badge.content}</span>
-                    </span>
-                  ))}
+                  {badges.map((badge: any) => {
+                    return (
+                      <span
+                        id={badge.id || ''}
+                        class={`
+                          inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
+                          bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
+                          text-[rgb(var(--ec-page-text))]
+                          shadow-xs
+                          ${badge.class ? badge.class : ''}
+                        `}
+                      >
+                        {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />}
+                        {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}
+                        <span>{badge.content}</span>
+                      </span>
+                    );
+                  })}
                 </div>
               )
             }

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -284,9 +284,9 @@ nodeGraphs.push({
 ---
 
 <VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
-  <main class="flex docs-layout h-full bg-[rgb(var(--ec-page-bg))]" {...pagefindAttributes}>
-    <div class="flex docs-layout w-full pl-16">
-      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8 bg-[rgb(var(--ec-page-bg))]">
+  <main class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]" {...pagefindAttributes}>
+    <div class="flex docs-layout w-full">
+      <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
         <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-2">
           <div>
             <div class="flex justify-between items-center">
@@ -332,6 +332,33 @@ nodeGraphs.push({
                 />
               </div>
             </div>
+
+            <h2 class="text-base pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</h2>
+            {
+              badges && (
+                <div class="flex flex-wrap gap-3 py-4">
+                  {badges.map((badge: any) => {
+                    return (
+                      <span
+                        id={badge.id || ''}
+                        class={`
+                          inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
+                          bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
+                          text-[rgb(var(--ec-page-text))]
+                          shadow-xs
+                          ${badge.class ? badge.class : ''}
+                        `}
+                      >
+                        {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />}
+                        {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}
+                        <span>{badge.content}</span>
+                      </span>
+                    );
+                  })}
+                </div>
+              )
+            }
+
             {
               isMarkedAsDeprecated && hasDeprecated && (
                 <Admonition
@@ -366,32 +393,6 @@ nodeGraphs.push({
               )
             }
 
-            <h2 class="text-lg pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</h2>
-            {
-              badges && (
-                <div class="flex flex-wrap gap-3 py-4">
-                  {badges.map((badge: any) => {
-                    return (
-                      <span
-                        id={badge.id || ''}
-                        class={`
-                          inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                          bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
-                          text-[rgb(var(--ec-page-text))]
-                          shadow-xs
-                          ${badge.class ? badge.class : ''}
-                        `}
-                      >
-                        {badge.icon && <badge.icon className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />}
-                        {badge.iconURL && <img src={badge.iconURL} class="w-4 h-4 flex-shrink-0 opacity-80" alt="" />}
-                        <span>{badge.content}</span>
-                      </span>
-                    );
-                  })}
-                </div>
-              )
-            }
-
             {
               props.data.draft && (
                 <Admonition type="warning" title={props.data?.draft?.title || `Draft ${friendlyCollectionName}`}>
@@ -445,7 +446,7 @@ nodeGraphs.push({
           }
         </div>
 
-        <div class="prose prose-md py-4 w-full">
+        <div class="prose prose-md py-4 w-full text-[15px]">
           <Content components={components(props)} />
         </div>
         <div data-pagefind-ignore>
@@ -501,9 +502,9 @@ nodeGraphs.push({
       </div>
       <aside
         id="eventcatalog-docs-sidebar"
-        class="hidden xl:block sticky top-0 pb-10 w-[280px] overflow-y-auto py-2 flex-shrink-0 pr-10 bg-[rgb(var(--ec-page-bg))]"
+        class="hidden xl:block sticky top-[4rem] self-start w-[280px] max-h-[calc(100vh-4rem)] overflow-y-auto py-2 flex-shrink-0 pr-10 bg-[rgb(var(--ec-page-bg))]"
       >
-        <div class="mt-4 space-y-8">
+        <div class="mt-8 space-y-8">
           {
             headings.length > 0 && (
               <div>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/spec/[filename].astro

@@ -64,7 +64,11 @@ if (isRemote) {
         </p>
       </div>
     ) : (
-      <div {...pagefindAttributes} class="relative">
+      <div
+        {...pagefindAttributes}
+        class="relative"
+        style="margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1);"
+      >
         {
           // Currently, Pagefind does not index metadata (such as the title),
           // so we need to ensure it is included as text on the page.

package/eventcatalog/src/pages/docs/[type]/[id]/language/[dictionaryId]/index.astro

@@ -32,12 +32,12 @@ const badges = [
 
 <VerticalSideBarLayout title={pageTitle} description={ubiquitousLanguage.summary}>
   <main
-    class="flex sm:px-8 docs-layout h-full max-w-7xl bg-[rgb(var(--ec-page-bg))]"
+    class="flex sm:px-8 docs-layout min-h-full max-w-7xl bg-[rgb(var(--ec-page-bg))]"
     data-pagefind-body
     data-pagefind-meta={`title:${pageTitle}`}
   >
     <div class="flex docs-layout w-full">
-      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8 min-h-[50em]">
+      <div class="w-full lg:mr-2 pr-8 py-8 min-h-[50em]">
         {/* Breadcrumb */}
         <nav class="mb-4 flex items-center space-x-2 text-sm text-[rgb(var(--ec-page-text-muted))]" aria-label="Breadcrumb">
           <a

package/eventcatalog/src/pages/docs/[type]/[id]/language/index.astro

@@ -23,20 +23,18 @@ const { subdomains, duplicateTerms } = ubiquitousLanguageData;
 
 <VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
   <main
-    class="flex sm:px-6 docs-layout h-full bg-[rgb(var(--ec-page-bg))]"
+    class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]"
     data-pagefind-body
     data-pagefind-meta={`title:${pageTitle}`}
   >
     <div class="flex docs-layout w-full">
-      <div class="w-full lg:mr-2 pr-8 overflow-y-auto pt-6 pb-8 min-h-[50em]">
+      <div class="w-full lg:mr-2 pr-24 py-8 min-h-[50em]">
         {/* Title Section */}
         <div class="relative border-b border-[rgb(var(--ec-page-border))] mb-6 pb-6">
           <div class="xl:flex xl:items-start xl:justify-between">
             <div class="min-w-0 flex-1">
-              <h1 class="text-xl font-bold leading-7 text-[rgb(var(--ec-page-text))] sm:text-2xl xl:text-3xl">
-                Ubiquitous Language
-              </h1>
-              <p class="mt-2 text-sm text-[rgb(var(--ec-page-text-muted))]">
+              <h1 class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">Ubiquitous Language</h1>
+              <p class="pt-2 text-base text-[rgb(var(--ec-page-text-muted))] font-light">
                 Browse and discover ubiquitous language terms in the {props.data.name} domain{
                   subdomains.length > 0 ? ' and its subdomains' : ''
                 }

package/eventcatalog/src/pages/docs/teams/[id]/index.astro

@@ -63,9 +63,13 @@ const pageTitle = `Team | ${props.data.name}`;
 ---
 
 <VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
-  <main class="flex sm:px-8 docs-layout h-full" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
+  <main
+    class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]"
+    data-pagefind-body
+    data-pagefind-meta={`title:${pageTitle}`}
+  >
     <div class="flex docs-layout w-full">
-      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
+      <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
         <div class="border-b border-[rgb(var(--ec-page-border))] pb-6">
           <div class="flex justify-start">
             <div class="flex flex-col justify-between space-y-3">
@@ -146,8 +150,11 @@ const pageTitle = `Team | ${props.data.name}`;
           <Content components={components(props)} />
         </div>
       </div>
-      <aside class="hidden lg:block sticky top-0 pb-10 w-96 overflow-y-auto py-2" data-pagefind-ignore>
-        <div class="sticky top-28 left-0 h-full overflow-y-auto pr-6 py-4">
+      <aside
+        class="hidden xl:block sticky top-[5.5rem] self-start w-[280px] max-h-[calc(100vh-5.5rem)] overflow-y-auto py-2 flex-shrink-0 pr-10 bg-[rgb(var(--ec-page-bg))]"
+        data-pagefind-ignore
+      >
+        <div class="py-2">
           {
             ownedDomainsList.length > 0 && (
               <PillListFlat

package/eventcatalog/src/pages/docs/users/[id]/index.astro

@@ -60,9 +60,13 @@ const pageTitle = `User | ${props.data.name}`;
 ---
 
 <VerticalSideBarLayout title={pageTitle}>
-  <main class="flex sm:px-8 docs-layout h-full" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
+  <main
+    class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]"
+    data-pagefind-body
+    data-pagefind-meta={`title:${pageTitle}`}
+  >
     <div class="flex docs-layout w-full">
-      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
+      <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
         <div class="border-b border-[rgb(var(--ec-page-border))] pb-6">
           <div class="flex justify-start gap-6">
             {
@@ -147,8 +151,11 @@ const pageTitle = `User | ${props.data.name}`;
           <Content components={components(props)} />
         </div>
       </div>
-      <aside class="hidden lg:block sticky top-0 pb-10 w-96 overflow-y-auto py-2" data-pagefind-ignore>
-        <div class="sticky top-28 left-0 h-full overflow-y-auto pr-6 py-4">
+      <aside
+        class="hidden xl:block sticky top-[5.5rem] self-start w-[280px] max-h-[calc(100vh-5.5rem)] overflow-y-auto py-2 flex-shrink-0 pr-10 bg-[rgb(var(--ec-page-bg))]"
+        data-pagefind-ignore
+      >
+        <div class="py-2">
           {
             ownedDomainsList.length > 0 && (
               <PillListFlat

package/eventcatalog/src/pages/schemas/explorer/index.astro

@@ -13,13 +13,15 @@ const apiAccessEnabled = isEventCatalogScaleEnabled();
 ---
 
 <VerticalSideBarLayout title="Schema Explorer - EventCatalog" showNestedSideBar={false}>
-  <main class="flex docs-layout h-[calc(100vh-var(--header-height,0px)-64px)] bg-[rgb(var(--ec-page-bg))]">
-    <div class="flex docs-layout w-full h-full">
-      <div class="w-full flex flex-col h-full">
-        <div class="w-full max-w-none! h-full flex flex-col overflow-hidden">
-          <SchemaExplorer client:load schemas={schemas as any} apiAccessEnabled={apiAccessEnabled} />
-        </div>
-      </div>
-    </div>
+  <style is:global>
+    #eventcatalog-header {
+      left: calc(var(--ec-vertical-nav-width, 14rem) + var(--ec-schema-sidebar-width, 360px)) !important;
+    }
+  </style>
+  <main
+    class="min-h-0 overflow-hidden bg-[rgb(var(--ec-page-bg))]"
+    style={`--ec-schema-sidebar-width: 360px; margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1); height: calc(100dvh - 60px);`}
+  >
+    <SchemaExplorer client:load schemas={schemas as any} apiAccessEnabled={apiAccessEnabled} />
   </main>
 </VerticalSideBarLayout>

package/eventcatalog/src/pages/studio.astro

@@ -42,7 +42,7 @@ const hasResources = resourcesToShow.length > 0;
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/logo.png" />
     <meta name="generator" content={Astro.generator} />
     <title>EventCatalog Studio</title>
   </head>

package/eventcatalog/src/pages/visualiser/[type]/[id]/[version]/entity-map/index.astro

@@ -1,7 +1,6 @@
 ---
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
 import VisualiserLayout from '@layouts/VisualiserLayout.astro';
-import { buildUrl } from '@utils/url-builder';
 import { ClientRouter } from 'astro:transitions';
 
 import { Page } from './_index.data';
@@ -19,9 +18,9 @@ const {
 ---
 
 <VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
-  <div class="m-4">
+  <div class="p-2">
     <div
-      class="h-[calc(100vh-130px)] w-full relative border border-[rgb(var(--ec-page-border))] rounded-md"
+      class="h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
       id={`${id}-portal`}
       transition:animate="fade"
     >
@@ -34,10 +33,6 @@ const {
       linkTo="visualiser"
       version={props.data.version}
       linksToVisualiser={false}
-      href={{
-        label: `Open documentation for ${props.data.name} v${props.data.version}`,
-        url: buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`),
-      }}
     />
   </div>
   <ClientRouter />

package/eventcatalog/src/pages/visualiser/[type]/[id]/[version]/index.astro

@@ -20,9 +20,9 @@ const {
 ---
 
 <VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
-  <div class="m-4">
+  <div class="p-2">
     <div
-      class="h-[calc(100vh-130px)] w-full relative border border-[rgb(var(--ec-page-border))] rounded-md"
+      class="h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
       id={`${id}-portal`}
       transition:animate="fade"
     >

package/eventcatalog/src/pages/visualiser/domains/[id]/[version]/entity-map/index.astro

@@ -1,7 +1,6 @@
 ---
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
 import VisualiserLayout from '@layouts/VisualiserLayout.astro';
-import { buildUrl } from '@utils/url-builder';
 import { ClientRouter } from 'astro:transitions';
 
 import { Page } from './_index.data';
@@ -19,9 +18,9 @@ const {
 ---
 
 <VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
-  <div class="m-4">
+  <div class="p-2">
     <div
-      class="h-[calc(100vh-130px)] w-full relative border border-[rgb(var(--ec-page-border))] rounded-md"
+      class="h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
       id={`${id}-portal`}
       transition:animate="fade"
     >
@@ -34,10 +33,6 @@ const {
       linkTo="visualiser"
       version={props.data.version}
       linksToVisualiser={false}
-      href={{
-        label: `Open documentation for ${props.data.name} v${props.data.version}`,
-        url: buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`),
-      }}
     />
   </div>
   <ClientRouter />