diff --git a/dinky-web/src/pages/DataStudio/BottomContainer/Console/ConsoleContent.tsx b/dinky-web/src/pages/DataStudio/BottomContainer/Console/ConsoleContent.tsx
index 0ef4acf6f6..67a5678f4f 100644
--- a/dinky-web/src/pages/DataStudio/BottomContainer/Console/ConsoleContent.tsx
+++ b/dinky-web/src/pages/DataStudio/BottomContainer/Console/ConsoleContent.tsx
@@ -44,12 +44,26 @@ export interface ProcessStep extends DataNode {
   time: number;
   log: string;
   lastUpdateStep: ProcessStep;
+  children: ProcessStep[];
 }
+
+const buildExpandKeys = (node: ProcessStep) => {
+  const keys: Key[] = [];
+  keys.push(node.key);
+  if (node.children.length > 0) {
+    node.children.forEach((item: ProcessStep) => {
+      keys.push(...buildExpandKeys(item));
+    });
+  }
+  return keys;
+};
+
 const ConsoleContent = (props: ConsoleProps) => {
   const { tab } = props;
 
   const [selectNode, setSelectNode] = useState<ProcessStep>();
   const [processNode, setProcessNode] = useState<ProcessStep>();
+  const [expandedKeys, setExpandedKeys] = useState<Key[]>([]);
 
   const process = `FlinkSubmit/${tab.params.taskId}`;
   const topic = `${SSE_TOPIC.PROCESS_CONSOLE}/${process}`;
@@ -105,6 +119,16 @@ const ConsoleContent = (props: ConsoleProps) => {
     );
   };
 
+  useEffect(() => {
+    if (processNode) {
+      setExpandedKeys(buildExpandKeys(processNode));
+    }
+  }, [processNode]);
+
+  const handleExpand = (expandedKeys: Key[]) => {
+    setExpandedKeys(expandedKeys);
+  };
+
   return (
     <div style={{ overflow: 'hidden' }}>
       <MovableSidebar
@@ -125,9 +149,8 @@ const ConsoleContent = (props: ConsoleProps) => {
             titleRender={renderTitle}
             onSelect={onSelect}
             treeData={[processNode]}
-            expandAction={'doubleClick'}
-            defaultExpandParent
-            defaultExpandAll
+            expandedKeys={expandedKeys}
+            onExpand={handleExpand}
           />
         ) : (
           <Empty />
diff --git a/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/index.tsx b/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/index.tsx
index d70d4dc4e8..ec573791d8 100644
--- a/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/index.tsx
+++ b/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/index.tsx
@@ -41,13 +41,15 @@ import { format } from 'sql-formatter';
 
 export type EditorProps = {
   taskId: number;
+  height?: number;
 };
 
 const CodeEditor: React.FC<EditorProps & any> = (props) => {
   const {
     taskId,
     tabs: { panes, activeKey },
-    dispatch
+    dispatch,
+    height,
   } = props;
 
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -96,7 +98,7 @@ const CodeEditor: React.FC<EditorProps & any> = (props) => {
 
   return (
     <Spin spinning={loading} delay={600}>
-      <div style={{ width: '100%', height: fullscreen ? 'calc(100vh - 50px)' : '33vh' }}>
+      <div style={{ width: '100%', height: fullscreen ? 'calc(100vh - 50px)' : height }}>
         <DiffModal
           diffs={diff}
           open={isModalOpen}
@@ -162,8 +164,8 @@ const CodeEditor: React.FC<EditorProps & any> = (props) => {
         <div
           style={{
             position: 'absolute',
-            top: 0,
-            right: 150
+            top: 20,
+            right: '7%'
           }}
         >
           {fullscreen ? (
diff --git a/dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx b/dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx
index 7ab82a2e71..10529f9472 100644
--- a/dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx
+++ b/dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx
@@ -223,7 +223,18 @@ const MiddleContainer = (props: any) => {
         }
 
         const v = item.params;
-        return <Editor taskId={v.taskId} />;
+        return (
+          <Editor
+            taskId={v.taskId}
+            height={
+              activeKey === item.key
+                ? fullscreen
+                  ? document.body.clientHeight
+                  : props.centerContentHeight - 40
+                : 0
+            }
+          />
+        );
       }
 
       if (isMetadataTabsItemType(item)) {
@@ -256,7 +267,7 @@ const MiddleContainer = (props: any) => {
             activeKey === item.key
               ? fullscreen
                 ? document.body.clientHeight
-                : props.centerContentHeight - 35
+                : props.centerContentHeight - 40
               : 0
           }
         >