From 3dd65ebca7e5ccb07cd85ad1d27e72310cd42247 Mon Sep 17 00:00:00 2001
From: carlosallexandre <carlos_costarodrigues@outlook.com>
Date: Fri, 24 Jan 2025 15:47:04 -0300
Subject: [PATCH 1/2] fix: adjust the content page height to prevent it creates
 2 scrolls

It adjust the spec content page height from 100vh to 100%.
It adds header/content as spacing variables to tailwind theme to
keep the layout heights consistent across the catalog.

Close #819
---
 eventcatalog/src/components/Header.astro          |  4 ++--
 .../src/layouts/VerticalSideBarLayout.astro       |  7 +++++--
 .../docs/[type]/[id]/[version]/spec/index.astro   |  4 ++--
 eventcatalog/tailwind.config.mjs                  | 15 +++++++++++++--
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/eventcatalog/src/components/Header.astro b/eventcatalog/src/components/Header.astro
index b32fdda1..0b34ccab 100644
--- a/eventcatalog/src/components/Header.astro
+++ b/eventcatalog/src/components/Header.astro
@@ -12,7 +12,7 @@ const logo = {
 
 <nav
   id="eventcatalog-header"
-  class="fixed top-0 left-0 right-0 bg-white border-b border-gray-100 py-3 font-bold text-xl bg-opacity-20 backdrop-blur-sm z-10"
+  class="fixed top-0 left-0 right-0 h-header bg-white border-b border-gray-100 py-3 font-bold text-xl bg-opacity-20 backdrop-blur-sm z-10"
 >
   <div class="px-4 sm:px-4 lg:px-4">
     <div class="flex justify-between items-center">
@@ -76,7 +76,7 @@ const logo = {
   </div>
 </nav>
 
-<div id="eventcatalog-header-spacer" class="h-16"></div>
+<div id="eventcatalog-header-spacer" class="h-header"></div>
 <!-- Spacer to prevent content from being hidden under the fixed header -->
 
 <script>
diff --git a/eventcatalog/src/layouts/VerticalSideBarLayout.astro b/eventcatalog/src/layouts/VerticalSideBarLayout.astro
index dd9ed718..c6e4c88d 100644
--- a/eventcatalog/src/layouts/VerticalSideBarLayout.astro
+++ b/eventcatalog/src/layouts/VerticalSideBarLayout.astro
@@ -202,12 +202,15 @@ const showSideBarOnLoad = currentNavigationItem?.sidebar;
 
         <div
           id="sidebar"
-          class={`sidebar-transition h-[100vh]  max-h-screen px-5 py-4 overflow-y-auto bg-white bg-gradient-to-b from-white  to-gray-100 border-r border-gray-200 w-60 shadow-lg ml-16 ${showSideBarOnLoad ? 'block' : 'hidden'}`}
+          class={`sidebar-transition h-content px-5 py-4 overflow-y-auto bg-white bg-gradient-to-b from-white  to-gray-100 border-r border-gray-200 w-60 shadow-lg ml-16 ${showSideBarOnLoad ? 'block' : 'hidden'}`}
         >
           <CatalogResourcesSideBar resources={sideNav} currentPath={currentPath} client:load />
         </div>
       </aside>
-      <main class={`sidebar-transition w-full max-h-screen ${showSideBarOnLoad ? 'ml-0' : 'ml-16'}`} id="content">
+      <main
+        class={`sidebar-transition w-full max-h-content overflow-y-auto ${showSideBarOnLoad ? 'ml-0' : 'ml-16'}`}
+        id="content"
+      >
         <slot />
       </main>
     </div>
diff --git a/eventcatalog/src/pages/docs/[type]/[id]/[version]/spec/index.astro b/eventcatalog/src/pages/docs/[type]/[id]/[version]/spec/index.astro
index c67bd6c0..35a41b2f 100644
--- a/eventcatalog/src/pages/docs/[type]/[id]/[version]/spec/index.astro
+++ b/eventcatalog/src/pages/docs/[type]/[id]/[version]/spec/index.astro
@@ -42,7 +42,7 @@ const pathOnDisk = path.join(process.cwd(), 'public', pathToSpec);
 const fileExists = fs.existsSync(pathOnDisk);
 ---
 
-<VerticalSideBarLayout title="OpenAPI Spec" }>
+<VerticalSideBarLayout title="OpenAPI Spec">
   {
     !fileExists ? (
       <div class="text-center h-screen  flex flex-col justify-center ">
@@ -65,7 +65,7 @@ const fileExists = fs.existsSync(pathOnDisk);
         theme="light"
         schema-style="table"
         class="relative top-0"
-        style={{ height: '100vh', width: '100%', zIndex: 100 }}
+        style={{ height: '100%', width: '100%', zIndex: 100 }}
         regular-font="ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
         bg-color="#ffffff"
         primary-color="#6b21a8"
diff --git a/eventcatalog/tailwind.config.mjs b/eventcatalog/tailwind.config.mjs
index 4a4a1b22..41d073f6 100644
--- a/eventcatalog/tailwind.config.mjs
+++ b/eventcatalog/tailwind.config.mjs
@@ -1,10 +1,21 @@
-/** @type {import('tailwindcss').Config} */
 import config from './eventcatalog.config.js';
+
+const HEADER_HEIGHT = '4rem';
 const theme = config.theme || {};
+
+/** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
     extend: {
+      height: {
+        header: HEADER_HEIGHT,
+        content: `calc(100vh - ${HEADER_HEIGHT})`,
+      },
+      spacing: {
+        header: HEADER_HEIGHT,
+        content: `calc(100vh - ${HEADER_HEIGHT})`,
+      },
       screens: {
         xxl: '1990px',
       },
@@ -17,7 +28,7 @@ export default {
           DEFAULT: '#ff6633',
           dark: '#cc3300',
         },
-        ...theme
+        ...theme,
       },
     },
   },

From 66f91f67e27e8aaa58e665065aa10b73ab6ae8ff Mon Sep 17 00:00:00 2001
From: David Boyne <boyneyy123@gmail.com>
Date: Wed, 5 Feb 2025 20:32:36 +0000
Subject: [PATCH 2/2] Create swift-cheetahs-flow.md

---
 .changeset/swift-cheetahs-flow.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/swift-cheetahs-flow.md

diff --git a/.changeset/swift-cheetahs-flow.md b/.changeset/swift-cheetahs-flow.md
new file mode 100644
index 00000000..f9013a9a
--- /dev/null
+++ b/.changeset/swift-cheetahs-flow.md
@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+fix(core): fixed issue with double scroll bars on spec pages