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%" }}>