Adds animated resizable to the Runs page

Author: samejr

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx

@@ -20,9 +20,11 @@ import { InfoPanel } from "~/components/primitives/InfoPanel";
 import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import {
+  RESIZABLE_PANEL_ANIMATION,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  collapsibleHandleClassName,
 } from "~/components/primitives/Resizable";
 import { SelectedItemsProvider } from "~/components/primitives/SelectedItemsProvider";
 import { ShortcutKey } from "~/components/primitives/ShortcutKey";
@@ -305,18 +307,32 @@ function RunsList({
           </>
         </div>
       </ResizablePanel>
-      {isShowingBulkActionInspector && (
-        <>
-          <ResizableHandle id="runs-handle" />
-          <ResizablePanel id="bulk-action-inspector" min="300px" default="400px" max="600px">
+      <ResizableHandle
+        id="runs-handle"
+        className={collapsibleHandleClassName(isShowingBulkActionInspector)}
+      />
+      <ResizablePanel
+        id="bulk-action-inspector"
+        default="400px"
+        min="400px"
+        max="600px"
+        className="overflow-hidden"
+        collapsible
+        collapsed={!isShowingBulkActionInspector}
+        onCollapseChange={() => {}}
+        collapsedSize="0px"
+        collapseAnimation={RESIZABLE_PANEL_ANIMATION}
+      >
+        <div className="h-full" style={{ minWidth: 400 }}>
+          {isShowingBulkActionInspector && (
             <CreateBulkActionInspector
               filters={filters}
               selectedItems={selectedItems}
               hasBulkActions={list.bulkActions.length > 0}
             />
-          </ResizablePanel>
-        </>
-      )}
+          )}
+        </div>
+      </ResizablePanel>
     </ResizablePanelGroup>
   );
 }