Fix (Split View): Use full width after split view is hidden

specifyweb/frontend/js_src/lib/components/QueryBuilder/SplitView.tsx

@@ -77,11 +77,16 @@ export function SplitView({
     null
   );
   const previousIsHorizontal = React.useRef(isHorizontal);
+  const previousIsSplit = React.useRef(isSplit);
   React.useLayoutEffect(() => {
-    if (previousIsHorizontal.current !== isHorizontal)
+    if (
+      previousIsHorizontal.current !== isHorizontal ||
+      (previousIsSplit.current && !isSplit)
+    )
       splitterRef.current?.setState({ primaryPane: undefined });
     previousIsHorizontal.current = isHorizontal;
-  }, [isHorizontal]);
+    previousIsSplit.current = isSplit;
+  }, [isHorizontal, isSplit]);
 
   return (
     <Splitter

specifyweb/frontend/js_src/lib/components/QueryBuilder/__tests__/SplitView.test.tsx

@@ -53,6 +53,7 @@ const primaryPane = <div />;
 const secondaryPane = <div />;
 
 test('clears the dragged pane size when the orientation changes', () => {
+  mockSetState.mockClear();
   const { rerender } = render(
     <SplitView
       isHorizontal
@@ -75,3 +76,30 @@ test('clears the dragged pane size when the orientation changes', () => {
   );
   expect(mockSetState).toHaveBeenCalledWith({ primaryPane: undefined });
 });
+
+test('clears the dragged pane size when the split view is hidden', () => {
+  mockSetState.mockClear();
+  const { rerender } = render(
+    <SplitView
+      isHorizontal
+      isSplit
+      primaryPane={primaryPane}
+      primaryPaneKey="primary"
+      secondaryPane={secondaryPane}
+      secondaryPaneKey="secondary"
+    />
+  );
+  expect(mockSetState).not.toHaveBeenCalled();
+
+  rerender(
+    <SplitView
+      isHorizontal
+      isSplit={false}
+      primaryPane={primaryPane}
+      primaryPaneKey="primary"
+      secondaryPane={secondaryPane}
+      secondaryPaneKey="secondary"
+    />
+  );
+  expect(mockSetState).toHaveBeenCalledWith({ primaryPane: undefined });
+});