update sidebar height based on logs state

elpassion · Oct 14, 2024 · d8f9aa4 · d8f9aa4
1 parent f0f152f
commit d8f9aa4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 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
@@ -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
@@ -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
@@ -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)];
+}