@eventcatalog/core 3.29.2 → 3.31.1

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,52 +47,48 @@ 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>
-          </div>
-          {
-            props.data.summary && (
-              <p class="text-lg 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">
-                {badges.map((badge: any) => (
-                  <span
-                    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))]
-                    `}
-                  >
-                    {badge.iconComponent && (
-                      <badge.iconComponent className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />
-                    )}
-                    <span>{badge.content}</span>
-                  </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 class="flex flex-col gap-4">
+            <div class="flex justify-between items-center gap-4">
+              <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{title}</h2>
+              <div class="hidden lg:block shrink-0">
+                <CopyAsMarkdown
+                  client:only="react"
+                  schemas={[]}
+                  chatQuery={chatQuery}
+                  chatEnabled={chatEnabled}
+                  editUrl=""
+                  markdownDownloadEnabled={true}
+                  rssFeedEnabled={false}
+                  preferChatAsDefault={false}
+                />
               </div>
-            )
-          }
+            </div>
+            {props.data.summary && <p class="text-base text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</p>}
+            {
+              badges.length > 0 && (
+                <div class="flex flex-wrap gap-3 py-4">
+                  {badges.map((badge: any) => (
+                    <span
+                      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))]
+                      `}
+                    >
+                      {badge.iconComponent && (
+                        <badge.iconComponent className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />
+                      )}
+                      <span>{badge.content}</span>
+                    </span>
+                  ))}
+                </div>
+              )
+            }
+          </div>
         </div>
         <div data-pagefind-ignore>
           {
@@ -124,27 +123,30 @@ const pagefindAttributes =
             )
           }
         </div>
-        <div class="prose py-8 max-w-none">
+        <div class="prose py-4 max-w-none">
           <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 +191,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">
@@ -80,23 +80,26 @@ const pagefindAttributes =
             </div>
 
             {
-              badges && (
+              badges && badges.length > 0 && (
                 <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

@@ -248,6 +248,7 @@ const {
 
 let friendlyCollectionName = props.collection.slice(0, props.collection.length - 1);
 friendlyCollectionName = friendlyCollectionName === 'querie' ? 'query' : friendlyCollectionName;
+friendlyCollectionName = friendlyCollectionName === 'entitie' ? 'entity' : friendlyCollectionName;
 
 const schemasForResource = getSchemasFromResource(props);
 
@@ -284,41 +285,49 @@ 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))]">
-        <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-2">
+  <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-6 pt-4">
           <div>
-            <div class="flex justify-between items-center">
-              <div class="flex items-center gap-2">
-                {
-                  headerIconSrc && (
-                    <img
-                      src={headerIconSrc}
-                      alt={props.data.name}
-                      class="w-8 h-8 md:w-10 md:h-10 object-contain rounded-md shrink-0"
+            <div class="flex justify-between items-end">
+              <div class="flex flex-col gap-4">
+                <span class="text-xs md:text-sm font-semibold text-[rgb(var(--ec-accent))] capitalize">
+                  {friendlyCollectionName}
+                </span>
+                <div class="flex items-center gap-3">
+                  {
+                    headerIconSrc && (
+                      <img
+                        src={headerIconSrc}
+                        alt={props.data.name}
+                        class="w-8 h-8 md:w-10 md:h-10 object-contain rounded-md shrink-0"
+                      />
+                    )
+                  }
+                  <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))] ${props.data.deprecated && hasDeprecated ? 'text-red-500' : ''}`}
+                    >
+                      {props.data.name}
+                      {props.data.latestVersion !== props.data.version && <span>(v{props.data.version})</span>}
+                    </h2>
+                    <FavoriteButton
+                      client:load
+                      nodeKey={`${collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap]}:${props.data.id}:${props.data.version}`}
+                      title={props.data.name}
+                      badge={collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap]
+                        .charAt(0)
+                        .toUpperCase() +
+                        collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap].slice(1)}
+                      href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}
+                      size="md"
                     />
-                  )
-                }
-                <h2
-                  id="doc-page-header"
-                  class={`text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))] ${props.data.deprecated && hasDeprecated ? 'text-red-500' : ''}`}
-                >
-                  {props.data.name}
-                  {props.data.latestVersion !== props.data.version && <span>(v{props.data.version})</span>}
-                </h2>
-                <FavoriteButton
-                  client:load
-                  nodeKey={`${collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap]}:${props.data.id}:${props.data.version}`}
-                  title={props.data.name}
-                  badge={collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap]
-                    .charAt(0)
-                    .toUpperCase() + collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap].slice(1)}
-                  href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}
-                  size="md"
-                />
+                  </div>
+                </div>
               </div>
-              <div class="hidden lg:block">
+              <div class="hidden lg:block mb-2">
                 <CopyAsMarkdown
                   client:only="react"
                   schemas={schemasForResource}
@@ -332,6 +341,33 @@ nodeGraphs.push({
                 />
               </div>
             </div>
+
+            <h2 class="text-base pt-4 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</h2>
+            {
+              badges && (
+                <div class="flex flex-wrap gap-3 pt-6 pb-2">
+                  {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 +402,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 +455,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 +511,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
@@ -77,7 +77,7 @@ const badges = [
             <p class="text-lg pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{ubiquitousLanguage.summary}</p>
             <!-- Add badge -->
             {
-              badges && (
+              badges && badges.length > 0 && (
                 <div class="flex flex-wrap gap-3 py-4">
                   {badges.map((badge: any) => {
                     return (