From 99d95a4cec4b0817e1e55dbd50d02dce8118851a Mon Sep 17 00:00:00 2001
From: Ashley Stanton-Nurse <ashleyst@microsoft.com>
Date: Fri, 9 Aug 2024 10:27:48 -0700
Subject: [PATCH] swap splitter directions in query results view (#1896)

* swap splitter directions in query results view

* refmt *sigh*
---
 src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
index bfcaa9bda..15f9ba13b 100644
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -681,10 +681,16 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
           )}
           <div className="tabPaneContentContainer">
             <SplitterLayout
-              vertical={this.state.queryResultsView === SplitterDirection.Vertical}
               primaryIndex={0}
-              primaryMinSize={100}
-              secondaryMinSize={200}
+              primaryMinSize={20}
+              secondaryMinSize={20}
+              // Percentage is a bit better when the splitter flips from vertical to horizontal.
+              percentage={true}
+              // NOTE: It is intentional that this looks reversed!
+              // The 'vertical' property refers to the stacking of the panes so is the opposite of the orientation of the splitter itself
+              // (vertically stacked => horizontal splitter)
+              // Our setting refers to the orientation of the splitter, so we need to reverse it here.
+              vertical={this.state.queryResultsView === SplitterDirection.Horizontal}
             >
               <Fragment>
                 <div className="queryEditor" style={{ height: "100%" }}>