diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx
index f68a0729bd7..7b51df8a8d2 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx
@@ -1,6 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd';
-import { HTMLAttributes, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, HTMLAttributes, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { t } from '@grafana/i18n';
@@ -500,9 +500,8 @@ export const QueryTransformList = memo(
                                       const showDebugLineAfter = isDebugMode && globalIndex === debugPosition - 1;
 
                                       return (
-                                        <>
+                                        <Fragment key={item.id}>
                                           <div
-                                            key={item.id}
                                             className={cx(styles.cardContainer, {
                                               [styles.cardDebugDisabled]: isDebugDisabled,
                                             })}
@@ -584,7 +583,7 @@ export const QueryTransformList = memo(
                                               </div>
                                             </div>
                                           )}
-                                        </>
+                                        </Fragment>
                                       );
                                     })}
                                     {provided.placeholder}
@@ -655,9 +654,8 @@ export const QueryTransformList = memo(
                                       const showDebugLineAfter = isDebugMode && globalIndex === debugPosition - 1;
 
                                       return (
-                                        <>
+                                        <Fragment key={item.id}>
                                           <div
-                                            key={item.id}
                                             className={cx(styles.cardContainer, {
                                               [styles.cardDebugDisabled]: isDebugDisabled,
                                             })}
@@ -740,7 +738,7 @@ export const QueryTransformList = memo(
                                               </div>
                                             </div>
                                           )}
-                                        </>
+                                        </Fragment>
                                       );
                                     })}
                                     {provided.placeholder}
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx b/public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx
index c3ab09f8222..772ed1c2bba 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx
@@ -148,6 +148,9 @@ function VizAndDataPane({
     };
   }, [controls, dataPane, sidebarState.size, vizHeight, containerHeight]);
 
+  const bottomPaneHeight = containerHeight - vizHeight - 80;
+  const expandedSidebarHeight = containerHeight - 16;
+
   if (!containerHeight) {
     return null;
   }
@@ -177,11 +180,20 @@ function VizAndDataPane({
 
       {dataPane && (
         <>
-          <div className={cx(styles.dataPane, isScrollingLayout && styles.fullSizeEditor)}>
+          <div
+            className={cx(styles.dataPane, isScrollingLayout && styles.fullSizeEditor)}
+            style={{ height: bottomPaneHeight }}
+          >
             <dataPane.Component model={dataPane} />
           </div>
 
-          <div className={styles.sidebar} style={{ width: sidebarWidth }}>
+          <div
+            className={styles.sidebar}
+            style={{
+              height: sidebarState.size === SidebarSize.Mini ? bottomPaneHeight : expandedSidebarHeight,
+              width: sidebarWidth,
+            }}
+          >
             <PanelDataSidebar model={dataPane} sidebarState={sidebarState} setSidebarState={setSidebarState} />
             <div style={{ position: 'absolute', top: 0, bottom: 0, right: 0, height: '100%' }}>
               <div
diff --git a/public/app/features/dashboard-scene/panel-edit/hooks.ts b/public/app/features/dashboard-scene/panel-edit/hooks.ts
index f713bb825f9..1fc8c0fd86f 100644
--- a/public/app/features/dashboard-scene/panel-edit/hooks.ts
+++ b/public/app/features/dashboard-scene/panel-edit/hooks.ts
@@ -43,10 +43,6 @@ export function useHorizontalResize({ initialWidth, minWidth = 0, maxWidth = Inf
       if (handle?.nodeType === Node.ELEMENT_NODE) {
         handle.addEventListener('mousedown', onMouseDown);
       }
-
-      return () => {
-        handle?.removeEventListener('mousedown', onMouseDown);
-      };
     },
     [maxWidth, minWidth, width]
   );
@@ -83,10 +79,6 @@ export function useVerticalResize({ initialHeight, minHeight = 0, maxHeight = In
       if (handle?.nodeType === Node.ELEMENT_NODE) {
         handle.addEventListener('mousedown', onMouseDown);
       }
-
-      return () => {
-        handle?.removeEventListener('mousedown', onMouseDown);
-      };
     },
     [maxHeight, minHeight, height]
   );