From d8f9aa4d74855c7df663ab233fb67f467d1db38c Mon Sep 17 00:00:00 2001
From: breeg554 <dvdk98@gmail.com>
Date: Mon, 14 Oct 2024 16:56:07 +0200
Subject: [PATCH] update sidebar height based on logs state

---
 .../build/BuilderSidebar/BuilderBottomSidebar.tsx         | 7 ++++++-
 .../pipelines/build/BuilderSidebar/BuilderSidebar.tsx     | 8 +++++++-
 apps/web-remix/app/tailwind.css                           | 5 +++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/web-remix/app/components/pages/pipelines/build/BuilderSidebar/BuilderBottomSidebar.tsx b/apps/web-remix/app/components/pages/pipelines/build/BuilderSidebar/BuilderBottomSidebar.tsx
index 221364d3f..3ec27ef64 100644
--- a/apps/web-remix/app/components/pages/pipelines/build/BuilderSidebar/BuilderBottomSidebar.tsx
+++ b/apps/web-remix/app/components/pages/pipelines/build/BuilderSidebar/BuilderBottomSidebar.tsx
@@ -76,7 +76,12 @@ const BuilderBottomSidebarClient = ({
     <BuilderSidebarContext.Provider
       value={{ isOpen, state, onPinClick, onClose }}
     >
-      <div onMouseOver={onMouseOver} onMouseLeave={onMouseLeave}>
+      <div
+        id="builder-bottom-sidebar"
+        onMouseOver={onMouseOver}
+        onMouseLeave={onMouseLeave}
+        data-state={isOpen ? 'open' : 'close'}
+      >
         <HoverableBottomLine />
 
         <div
diff --git a/apps/web-remix/app/components/pages/pipelines/build/BuilderSidebar/BuilderSidebar.tsx b/apps/web-remix/app/components/pages/pipelines/build/BuilderSidebar/BuilderSidebar.tsx
index 0f4f4877a..f3c7117b8 100644
--- a/apps/web-remix/app/components/pages/pipelines/build/BuilderSidebar/BuilderSidebar.tsx
+++ b/apps/web-remix/app/components/pages/pipelines/build/BuilderSidebar/BuilderSidebar.tsx
@@ -19,6 +19,7 @@ import { BuilderSidebarBlocks } from './BuilderSidebarBlocks';
 
 interface BuilderSidebarProps {
   onBlockCreate: (created: IBlockConfig) => Promise<unknown>;
+  contentClassName?: string;
 }
 
 // Bypass for getting rid of the hydration error when using the LS
@@ -30,7 +31,10 @@ export const BuilderSidebar = (props: BuilderSidebarProps) => {
   );
 };
 
-const BuilderSidebarClient = ({ onBlockCreate }: BuilderSidebarProps) => {
+const BuilderSidebarClient = ({
+  onBlockCreate,
+  contentClassName,
+}: BuilderSidebarProps) => {
   const organizationId = useOrganizationId();
 
   const [state, setState] = useLocalStorage<BuilderSidebarState>(
@@ -94,8 +98,10 @@ const BuilderSidebarClient = ({ onBlockCreate }: BuilderSidebarProps) => {
         <HoverableLine />
 
         <div
+          id="builder-sidebar-content"
           className={cn(
             'absolute top-0 left-0 z-[11] h-full w-[320px] border-r border-input py-4 px-2 bg-white transition-transform ease-in-out',
+            contentClassName,
             {
               '-translate-x-full': !isOpen,
               'translate-x-0': isOpen,
diff --git a/apps/web-remix/app/tailwind.css b/apps/web-remix/app/tailwind.css
index c6e9a368a..90f28cfb9 100644
--- a/apps/web-remix/app/tailwind.css
+++ b/apps/web-remix/app/tailwind.css
@@ -79,3 +79,8 @@ p.is-editor-empty:first-child::before {
 .tiptap .mention{
   @apply text-blue-500;
 }
+
+
+:root:has(#builder-bottom-sidebar[data-state="open"]) #builder-sidebar-content{
+  @apply h-[calc(100%-200px)];
+}