PanelEdit: Fixes broken panel edit splitter logic (#59859)

* Alt panel edit fix

* fix fix

public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx

@@ -141,12 +141,6 @@ const getStyles = (theme: GrafanaTheme2, hasSplit: boolean) => {
   `;
 
   return {
-    singleLeftPane: css`
-      height: 100%;
-      position: absolute;
-      overflow: hidden;
-      width: 100%;
-    `,
     resizerV: cx(
       resizer,
       css`

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -241,18 +241,30 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
     );
   }
 
-  renderPanelAndEditor(styles: EditorStyles) {
+  renderPanelAndEditor(uiState: PanelEditorUIState, styles: EditorStyles) {
     const { panel, dashboard, plugin, tab } = this.props;
     const tabs = getPanelEditorTabs(tab, plugin);
     const isOnlyPanel = tabs.length === 0;
     const panelPane = this.renderPanel(styles, isOnlyPanel);
 
     if (tabs.length === 0) {
-      return panelPane;
+      return <div className={styles.onlyPanel}>{panelPane}</div>;
     }
 
-    return [
+    return (
-      panelPane,
+      <SplitPaneWrapper
+        splitOrientation="horizontal"
+        maxSize={-200}
+        paneSize={uiState.topPaneSize}
+        primary="first"
+        secondaryPaneStyle={{ minHeight: 0 }}
+        onDragFinished={(size) => {
+          if (size) {
+            updatePanelEditorUIState({ topPaneSize: size / window.innerHeight });
+          }
+        }}
+      >
+        {panelPane}
         <div
           className={styles.tabsWrapper}
           aria-label={selectors.components.PanelEditor.DataPane.content}
@@ -265,8 +277,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
             tabs={tabs}
             onChangeTab={this.onChangeTab}
           />
-      </div>,
+        </div>
-    ];
+      </SplitPaneWrapper>
+    );
   }
 
   renderTemplateVariables(styles: EditorStyles) {
@@ -433,25 +446,6 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
     );
   }
 
-  renderHorizontalSplit(uiState: PanelEditorUIState, styles: EditorStyles) {
-    return (
-      <SplitPaneWrapper
-        splitOrientation="horizontal"
-        maxSize={-200}
-        paneSize={uiState.topPaneSize}
-        primary="first"
-        secondaryPaneStyle={{ minHeight: 0 }}
-        onDragFinished={(size) => {
-          if (size) {
-            updatePanelEditorUIState({ topPaneSize: size / window.innerHeight });
-          }
-        }}
-      >
-        {this.renderPanelAndEditor(styles)}
-      </SplitPaneWrapper>
-    );
-  }
-
   render() {
     const { initDone, uiState, theme, sectionNav, pageNav, className, updatePanelEditorUIState } = this.props;
     const styles = getStyles(theme, this.props);
@@ -472,7 +466,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
         <div className={styles.wrapper}>
           <div className={styles.verticalSplitPanesWrapper}>
             {!uiState.isPanelOptionsVisible ? (
-              this.renderHorizontalSplit(uiState, styles)
+              this.renderPanelAndEditor(uiState, styles)
             ) : (
               <SplitPaneWrapper
                 splitOrientation="vertical"
@@ -485,7 +479,7 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
                   }
                 }}
               >
-                {this.renderHorizontalSplit(uiState, styles)}
+                {this.renderPanelAndEditor(uiState, styles)}
                 {this.renderOptionsPane()}
               </SplitPaneWrapper>
             )}
@@ -569,6 +563,12 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2, props: Props) => {
       position: relative;
       flex-direction: column;
     `,
+    onlyPanel: css`
+      height: 100%;
+      position: absolute;
+      overflow: hidden;
+      width: 100%;
+    `,
   };
 });