diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ConfigEditorWithSchema.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ConfigEditorWithSchema.tsx
index 97baf799c8482..986cc12d607df 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/ConfigEditorWithSchema.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/ConfigEditorWithSchema.tsx
@@ -4,7 +4,7 @@ import {createGlobalStyle} from 'styled-components';
 import {Box} from './Box';
 import {ConfigEditorHandle, ConfigSchema, NewConfigEditor} from './NewConfigEditor';
 import {Spinner} from './Spinner';
-import {SplitPanelContainer} from './SplitPanelContainer';
+import {SplitPanelContainer, SplitPanelContainerHandle} from './SplitPanelContainer';
 import {ConfigEditorHelp} from './configeditor/ConfigEditorHelp';
 import {isHelpContextEqual} from './configeditor/isHelpContextEqual';
 import {ConfigEditorHelpContext} from './configeditor/types/ConfigEditorHelpContext';
@@ -32,7 +32,7 @@ export const ConfigEditorWithSchema = ({
   onConfigChange,
   configSchema,
 }: Props) => {
-  const editorSplitPanelContainer = useRef<SplitPanelContainer | null>(null);
+  const editorSplitPanelContainer = useRef<SplitPanelContainerHandle | null>(null);
   const [editorHelpContext, setEditorHelpContext] = useState<ConfigEditorHelpContext | null>(null);
   const editor = useRef<ConfigEditorHandle | null>(null);
 
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/SplitPanelContainer.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/SplitPanelContainer.tsx
index 37c27bf55cf93..c0725f9300440 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/SplitPanelContainer.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/SplitPanelContainer.tsx
@@ -1,9 +1,7 @@
-import * as React from 'react';
+import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
 import styled from 'styled-components';
 
-import {Button} from './Button';
 import {Colors} from './Color';
-import {Icon} from './Icon';
 
 const DIVIDER_THICKNESS = 2;
 
@@ -13,110 +11,124 @@ interface SplitPanelContainerProps {
   first: React.ReactNode;
   firstInitialPercent: number;
   firstMinSize?: number;
+  secondMinSize?: number;
   second: React.ReactNode | null; // Note: pass null to hide / animate away the second panel
 }
 
-interface SplitPanelContainerState {
-  size: number;
-  key: string;
-  resizing: boolean;
-}
-
-export class SplitPanelContainer extends React.Component<
-  SplitPanelContainerProps,
-  SplitPanelContainerState
-> {
-  constructor(props: SplitPanelContainerProps) {
-    super(props);
-
-    const key = `dagster.panel-width.${this.props.identifier}`;
-    const value = window.localStorage.getItem(key);
-    let size = Number(value);
-    if (value === null || isNaN(size)) {
-      size = this.props.firstInitialPercent;
-    }
-
-    this.state = {size, key, resizing: false};
-  }
+export type SplitPanelContainerHandle = {
+  getSize: () => number;
+  changeSize: (value: number) => void;
+};
 
-  onChangeSize = (size: number) => {
-    this.setState({size});
-    window.localStorage.setItem(this.state.key, `${size}`);
-  };
+export const SplitPanelContainer = forwardRef<SplitPanelContainerHandle, SplitPanelContainerProps>(
+  (props, ref) => {
+    const {
+      axis = 'horizontal',
+      identifier,
+      first,
+      firstInitialPercent,
+      firstMinSize,
+      secondMinSize = 0,
+      second,
+    } = props;
+
+    const [_, setTrigger] = useState(0);
+    const [resizing, setResizing] = useState(false);
+    const key = `dagster.panel-width.${identifier}`;
+
+    const getSize = useCallback(() => {
+      if (!second) {
+        return 100;
+      }
+      const storedSize = window.localStorage.getItem(key);
+      const parsed = storedSize === null ? null : parseFloat(storedSize);
+      return parsed === null || isNaN(parsed) ? firstInitialPercent : parsed;
+    }, [firstInitialPercent, key, second]);
+
+    const onChangeSize = useCallback(
+      (newValue: number) => {
+        window.localStorage.setItem(key, `${newValue}`);
+        setTrigger((current) => (current ? 0 : 1));
+      },
+      [key],
+    );
 
-  getSize = () => {
-    return this.state.size;
-  };
+    useImperativeHandle(ref, () => ({getSize, changeSize: onChangeSize}), [onChangeSize, getSize]);
 
-  render() {
-    const {firstMinSize, first, second} = this.props;
-    const {size: _size, resizing} = this.state;
-    const axis = this.props.axis || 'horizontal';
+    const firstSize = getSize();
 
     const firstPaneStyles: React.CSSProperties = {flexShrink: 0};
-    const firstSize = second ? _size : 100;
 
     // Note: The divider appears after the first panel, so making the first panel 100% wide
     // hides the divider offscreen. To prevent this, we subtract the divider depth.
     if (axis === 'horizontal') {
       firstPaneStyles.minWidth = firstMinSize;
-      firstPaneStyles.width = `calc(${firstSize}% - ${DIVIDER_THICKNESS}px)`;
+      firstPaneStyles.width = `calc(${firstSize / 100} * (100% - ${
+        DIVIDER_THICKNESS + (second ? secondMinSize : 0)
+      }px))`;
     } else {
       firstPaneStyles.minHeight = firstMinSize;
-      firstPaneStyles.height = `calc(${firstSize}% - ${DIVIDER_THICKNESS}px)`;
+      firstPaneStyles.height = `calc(${firstSize / 100} * (100% - ${
+        DIVIDER_THICKNESS + (second ? secondMinSize : 0)
+      }px))`;
     }
 
     return (
-      <Container axis={axis} id="split-panel-container" resizing={resizing}>
+      <Container axis={axis} className="split-panel-container" resizing={resizing}>
         <div className="split-panel" style={firstPaneStyles}>
           {first}
         </div>
         <PanelDivider
           axis={axis}
           resizing={resizing}
-          onSetResizing={(resizing) => this.setState({resizing})}
-          onMove={this.onChangeSize}
+          secondMinSize={secondMinSize}
+          onSetResizing={setResizing}
+          onMove={onChangeSize}
         />
         <div className="split-panel" style={{flex: 1}}>
           {second}
         </div>
       </Container>
     );
-  }
-}
+  },
+);
 
 interface IDividerProps {
   axis: 'horizontal' | 'vertical';
   resizing: boolean;
+  secondMinSize: number;
   onSetResizing: (resizing: boolean) => void;
   onMove: (vw: number) => void;
 }
 
-class PanelDivider extends React.Component<IDividerProps> {
-  ref = React.createRef<any>();
+const PanelDivider = (props: IDividerProps) => {
+  const {axis, resizing, secondMinSize, onSetResizing, onMove} = props;
+  const ref = useRef<HTMLDivElement>(null);
 
-  onMouseDown = (e: React.MouseEvent) => {
+  const onMouseDown = (e: React.MouseEvent) => {
     e.preventDefault();
 
-    this.props.onSetResizing(true);
+    onSetResizing(true);
 
     const onMouseMove = (event: MouseEvent) => {
-      const parent = this.ref.current?.closest('#split-panel-container');
+      const parent = ref.current?.closest('.split-panel-container');
       if (!parent) {
         return;
       }
       const parentRect = parent.getBoundingClientRect();
 
       const firstPanelPercent =
-        this.props.axis === 'horizontal'
-          ? ((event.clientX - parentRect.left) * 100) / parentRect.width
-          : ((event.clientY - parentRect.top) * 100) / parentRect.height;
+        axis === 'horizontal'
+          ? ((event.clientX - parentRect.left) * 100) /
+            (parentRect.width - secondMinSize - DIVIDER_THICKNESS)
+          : ((event.clientY - parentRect.top) * 100) /
+            (parentRect.height - secondMinSize - DIVIDER_THICKNESS);
 
-      this.props.onMove(Math.min(100, Math.max(0, firstPanelPercent)));
+      onMove(Math.min(100, Math.max(0, firstPanelPercent)));
     };
 
     const onMouseUp = () => {
-      this.props.onSetResizing(false);
+      onSetResizing(false);
       document.removeEventListener('mousemove', onMouseMove);
       document.removeEventListener('mouseup', onMouseUp);
     };
@@ -124,109 +136,60 @@ class PanelDivider extends React.Component<IDividerProps> {
     document.addEventListener('mouseup', onMouseUp);
   };
 
-  render() {
-    const Wrapper = DividerWrapper[this.props.axis];
-    const HitArea = DividerHitArea[this.props.axis];
-    return (
-      <Wrapper resizing={this.props.resizing} ref={this.ref}>
-        <HitArea onMouseDown={this.onMouseDown} />
-      </Wrapper>
+  const hitArea =
+    axis === 'horizontal' ? (
+      <HorizontalDividerHitArea onMouseDown={onMouseDown} />
+    ) : (
+      <VerticalDividerHitArea onMouseDown={onMouseDown} />
     );
-  }
-}
 
-interface PanelToggleProps {
-  axis: 'horizontal' | 'vertical';
-  container: React.RefObject<SplitPanelContainer>;
-}
-
-// Todo: This component attempts to sync itself with the container, but it can't
-// observe the container's width without a React context or adding a listener, etc.
-// If we keep making components that manipulate panel state we may want to move it
-// all to a context consumed by both.
-//
-export const SecondPanelToggle = ({container, axis}: PanelToggleProps) => {
-  const [prevSize, setPrevSize] = React.useState<number | 'unknown'>('unknown');
-  const initialIsOpen = (container.current?.state.size || 0) < 100;
-
-  const [open, setOpen] = React.useState<boolean>(initialIsOpen);
-  React.useEffect(() => setOpen(initialIsOpen), [initialIsOpen]);
-
-  return (
-    <Button
-      active={open}
-      title="Toggle second pane"
-      icon={
-        <Icon
-          name={
-            axis === 'horizontal'
-              ? open
-                ? 'panel_hide_right'
-                : 'panel_show_right'
-              : 'panel_show_bottom'
-          }
-        />
-      }
-      onClick={() => {
-        if (!container.current) {
-          return;
-        }
-        const current = container.current.state.size;
-        if (current < 90) {
-          setPrevSize(current);
-          setOpen(false);
-          container.current.onChangeSize(100);
-        } else {
-          setOpen(true);
-          container.current.onChangeSize(
-            prevSize === 'unknown' ? container.current.props.firstInitialPercent : prevSize,
-          );
-        }
-      }}
-    />
+  return axis === 'horizontal' ? (
+    <HorizontalDividerWrapper $resizing={resizing} ref={ref}>
+      {hitArea}
+    </HorizontalDividerWrapper>
+  ) : (
+    <VerticalDividerWrapper $resizing={resizing} ref={ref}>
+      {hitArea}
+    </VerticalDividerWrapper>
   );
 };
 
 // Note: -1px margins here let the divider cover the last 1px of the previous box, hiding
 // any scrollbar border it might have.
 
-const DividerWrapper = {
-  horizontal: styled.div<{resizing: boolean}>`
-    width: ${DIVIDER_THICKNESS}px;
-    z-index: 1;
-    background: ${(p) => (p.resizing ? Colors.accentGray() : Colors.keylineDefault())};
-    margin-left: -1px;
-    overflow: visible;
-    position: relative;
-  `,
-  vertical: styled.div<{resizing: boolean}>`
-    height: ${DIVIDER_THICKNESS}px;
-    z-index: 1;
-    background: ${(p) => (p.resizing ? Colors.accentGray() : Colors.keylineDefault())};
-    margin-top: -1px;
-    overflow: visible;
-    position: relative;
-  `,
-};
+const HorizontalDividerWrapper = styled.div<{$resizing: boolean}>`
+  width: ${DIVIDER_THICKNESS}px;
+  z-index: 1;
+  background: ${(p) => (p.$resizing ? Colors.accentGray() : Colors.keylineDefault())};
+  margin-left: -1px;
+  overflow: visible;
+  position: relative;
+`;
+const VerticalDividerWrapper = styled.div<{$resizing: boolean}>`
+  height: ${DIVIDER_THICKNESS}px;
+  z-index: 1;
+  background: ${(p) => (p.$resizing ? Colors.accentGray() : Colors.keylineDefault())};
+  margin-top: -1px;
+  overflow: visible;
+  position: relative;
+`;
 
-const DividerHitArea = {
-  horizontal: styled.div`
-    width: 17px;
-    height: 100%;
-    z-index: 1;
-    cursor: ew-resize;
-    position: relative;
-    left: -8px;
-  `,
-  vertical: styled.div`
-    height: 17px;
-    width: 100%;
-    z-index: 1;
-    cursor: ns-resize;
-    position: relative;
-    top: -8px;
-  `,
-};
+const HorizontalDividerHitArea = styled.div`
+  width: 17px;
+  height: 100%;
+  z-index: 1;
+  cursor: ew-resize;
+  position: relative;
+  left: -8px;
+`;
+const VerticalDividerHitArea = styled.div`
+  height: 17px;
+  width: 100%;
+  z-index: 1;
+  cursor: ns-resize;
+  position: relative;
+  top: -8px;
+`;
 
 const Container = styled.div<{
   axis?: 'horizontal' | 'vertical';
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
index d8b094c988bdd..98ce2a5529a19 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
@@ -703,6 +703,7 @@ const AssetGraphExplorerWithData = ({
       identifier="asset-graph-explorer"
       firstInitialPercent={70}
       firstMinSize={400}
+      secondMinSize={400}
       first={
         <ErrorBoundary region="graph">
           {graphQueryItems.length === 0 ? (
@@ -876,6 +877,7 @@ const AssetGraphExplorerWithData = ({
         identifier="explorer-wrapper"
         firstMinSize={300}
         firstInitialPercent={0}
+        secondMinSize={400}
         first={
           showSidebar ? (
             <AssetGraphExplorerSidebar
diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadConfigExpansionButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadConfigExpansionButton.tsx
new file mode 100644
index 0000000000000..626c841bd06d0
--- /dev/null
+++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadConfigExpansionButton.tsx
@@ -0,0 +1,52 @@
+import {Button, Icon} from '@dagster-io/ui-components';
+import {useState} from 'react';
+
+interface Props {
+  axis: 'horizontal' | 'vertical';
+  firstInitialPercent: number;
+  getSize?: () => number;
+  changeSize?: (value: number) => void;
+}
+
+export const LaunchpadConfigExpansionButton = ({
+  axis,
+  firstInitialPercent,
+  getSize,
+  changeSize,
+}: Props) => {
+  const [prevSize, setPrevSize] = useState<number | 'unknown'>('unknown');
+  const [open, setOpen] = useState<boolean>(() => {
+    const size = getSize ? getSize() : 0;
+    return size < 100;
+  });
+
+  const onClick = () => {
+    if (!getSize || !changeSize) {
+      return;
+    }
+
+    const size = getSize();
+    if (size < 90) {
+      setPrevSize(size);
+      setOpen(false);
+      changeSize(100);
+    } else {
+      setOpen(true);
+      changeSize(prevSize === 'unknown' ? firstInitialPercent : prevSize);
+    }
+  };
+
+  const icon = (
+    <Icon
+      name={
+        axis === 'horizontal'
+          ? open
+            ? 'panel_hide_right'
+            : 'panel_show_right'
+          : 'panel_show_bottom'
+      }
+    />
+  );
+
+  return <Button active={open} title="Toggle second pane" icon={icon} onClick={onClick} />;
+};
diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSession.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSession.tsx
index 9716ced52e8ed..e47f37fa4bfb9 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSession.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/LaunchpadSession.tsx
@@ -14,8 +14,8 @@ import {
   Group,
   Icon,
   NewConfigEditor,
-  SecondPanelToggle,
   SplitPanelContainer,
+  SplitPanelContainerHandle,
   TextInput,
   isHelpContextEqual,
 } from '@dagster-io/ui-components';
@@ -29,6 +29,7 @@ import {
   ConfigEditorConfigPicker,
 } from './ConfigEditorConfigPicker';
 import {ConfigEditorModePicker} from './ConfigEditorModePicker';
+import {LaunchpadConfigExpansionButton} from './LaunchpadConfigExpansionButton';
 import {useLaunchPadHooks} from './LaunchpadHooksContext';
 import {LoadingOverlay} from './LoadingOverlay';
 import {OpSelector} from './OpSelector';
@@ -197,7 +198,6 @@ const LaunchpadSession = (props: LaunchpadSessionProps) => {
 
   const mounted = React.useRef<boolean>(false);
   const editor = React.useRef<ConfigEditorHandle | null>(null);
-  const editorSplitPanelContainer = React.useRef<SplitPanelContainer | null>(null);
   const previewCounter = React.useRef(0);
 
   const {isJob} = pipeline;
@@ -567,6 +567,8 @@ const LaunchpadSession = (props: LaunchpadSessionProps) => {
   const onConfigLoading = () => dispatch({type: 'toggle-config-loading', payload: true});
   const onConfigLoaded = () => dispatch({type: 'toggle-config-loading', payload: false});
 
+  const splitPanelRef = React.useRef<SplitPanelContainerHandle>(null);
+
   const {
     preview,
     previewLoading,
@@ -745,7 +747,12 @@ const LaunchpadSession = (props: LaunchpadSessionProps) => {
                 </Button>
               </ShortcutHandler>
               <SessionSettingsSpacer />
-              <SecondPanelToggle axis="horizontal" container={editorSplitPanelContainer} />
+              <LaunchpadConfigExpansionButton
+                axis="horizontal"
+                firstInitialPercent={75}
+                getSize={splitPanelRef.current?.getSize}
+                changeSize={splitPanelRef.current?.changeSize}
+              />
             </SessionSettingsBar>
             {pipeline.tags.length || tagsFromSession.length ? (
               <Box
@@ -783,7 +790,7 @@ const LaunchpadSession = (props: LaunchpadSessionProps) => {
               </Box>
             ) : null}
             <SplitPanelContainer
-              ref={editorSplitPanelContainer}
+              ref={splitPanelRef}
               axis="horizontal"
               identifier="execution-editor"
               firstMinSize={100}
@@ -832,6 +839,7 @@ const LaunchpadSession = (props: LaunchpadSessionProps) => {
             />
           </>
         }
+        secondMinSize={240}
       />
 
       <LaunchButtonContainer launchpadType={launchpadType}>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/Run.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/Run.tsx
index 9d9d0de7b7fd8..e3d3cc0df5ec6 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/Run.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/Run.tsx
@@ -6,6 +6,7 @@ import {
   Icon,
   NonIdealState,
   SplitPanelContainer,
+  SplitPanelContainerHandle,
   Tooltip,
 } from '@dagster-io/ui-components';
 import * as React from 'react';
@@ -249,35 +250,33 @@ const RunWithData = ({
     onSetSelectionQuery(newSelected.join(', ') || '*');
   };
 
-  const [splitPanelContainer, setSplitPanelContainer] = React.useState<null | SplitPanelContainer>(
-    null,
-  );
+  const [expandedPanel, setExpandedPanel] = React.useState<null | 'top' | 'bottom'>(null);
+  const containerRef = React.useRef<SplitPanelContainerHandle>(null);
+
   React.useEffect(() => {
-    const initialSize = splitPanelContainer?.getSize();
-    switch (initialSize) {
-      case 100:
+    if (containerRef.current) {
+      const size = containerRef.current.getSize();
+      if (size === 100) {
         setExpandedPanel('top');
-        return;
-      case 0:
+      } else if (size === 0) {
         setExpandedPanel('bottom');
-        return;
+      }
     }
-  }, [splitPanelContainer]);
+  }, []);
 
-  const [expandedPanel, setExpandedPanel] = React.useState<null | 'top' | 'bottom'>(null);
   const isTopExpanded = expandedPanel === 'top';
   const isBottomExpanded = expandedPanel === 'bottom';
 
   const expandBottomPanel = () => {
-    splitPanelContainer?.onChangeSize(0);
+    containerRef.current?.changeSize(0);
     setExpandedPanel('bottom');
   };
   const expandTopPanel = () => {
-    splitPanelContainer?.onChangeSize(100);
+    containerRef.current?.changeSize(100);
     setExpandedPanel('top');
   };
   const resetPanels = () => {
-    splitPanelContainer?.onChangeSize(50);
+    containerRef.current?.changeSize(50);
     setExpandedPanel(null);
   };
 
@@ -331,14 +330,13 @@ const RunWithData = ({
   return (
     <>
       <SplitPanelContainer
-        ref={(container) => {
-          setSplitPanelContainer(container);
-        }}
+        ref={containerRef}
         axis="vertical"
         identifier="run-gantt"
         firstInitialPercent={35}
         firstMinSize={56}
         first={gantt(metadata)}
+        secondMinSize={56}
         second={
           <ErrorBoundary region="logs">
             <LogsContainer>