split-view-container and sash-container move up when when Pane visible property set to false in vertical mode

[ChristopherHButler]

I believe I found a bug when the Allotment is in a vertical configuration and one pane (the bottom one in my case) has the visible property set to false. It seems the split-view-container and sash-container move up. I can correct the behavior by adding top: 4px to the split-view-container but I have more than one Allotment on the page and doing this through css classes will mess up the rest of my page.

Here is a code snippet where I am using it and below I made a screen recording to show what I mean.

It's entirely possible that some styling I've applied somewhere is messing something up so any help would be greatly appreciated.

return (
    <Allotment
      ref={localRightPanelRef}
      vertical
      minSize={EditorMeasurements.rightPanel.minSize}
      onDragStart={() => dispatch(setIsDraggingRightVerticalPane({ isDragging: true }))}
      onDragEnd={() => dispatch(setIsDraggingRightVerticalPane({ isDragging: false }))}
    >
      <Allotment.Pane
        key="web-viewer"
        minSize={EditorMeasurements.webPanel.minSize}
        preferredSize={EditorMeasurements.webPanel.preferredSize}
        priority={LayoutPriority.High}
      >
        <div className="flex flex-col h-full w-full">
          <BrowserHeader />
          <Browser
            isDragging={isDraggingSidebarHorizontalPane || isDraggingMainHorizontalPane || isDraggingRightVerticalPane}
            setBrowserIframeRef={setBrowserIframeRef}
          />
        </div>
      </Allotment.Pane>
          <Allotment.Pane
            key="dev-tools"
            minSize={EditorMeasurements.devToolsPanel.minSize}
            preferredSize={EditorMeasurements.devToolsPanel.preferredSize}
            visible={showEditorDevToolsPanel}
          >
            <DevTools />
          </Allotment.Pane>
    </Allotment>
  );

https://github.com/johnwalley/allotment/assets/29358086/17202d25-0636-4761-adc8-a18dc77633cf

[ChristopherHButler]

I found a workaround to this for anyone who might run into the issue. I did some css selecting inside a useEffect to add a little styling:

  useEffect(() => {
    const webviewWrapper = document.getElementById("web-view-wrapper") as HTMLElement;

    if (webviewWrapper) {
      const parentAllotment = webviewWrapper.closest(".split-view-container") as HTMLElement;
      if (parentAllotment) {
        parentAllotment.style.top = showEditorDevToolsPanel ? '0px' : '4px';
      }
    }
  }, [showEditorDevToolsPanel]);