good enough

public/app/features/dashboard-scene/panel-edit/PanelEditorRenderer.tsx

@@ -25,6 +25,11 @@ export function PanelEditorRenderer({ model }: SceneComponentProps<PanelEditor>)
   const { optionsPane } = model.useState();
   const styles = useStyles2(getWrapperStyles);
   const [isInitiallyCollapsed, setIsCollapsed] = useEditPaneCollapsed();
+  const [containerRef, { height: containerHeight }] = useMeasure<HTMLDivElement>();
+
+  useEffect(() => {
+    console.log('PanelEditorRenderer containerHeight', containerHeight);
+  }, [containerHeight]);
 
   const isScrollingLayout = useScrollReflowLimit();
 
@@ -46,7 +51,7 @@ export function PanelEditorRenderer({ model }: SceneComponentProps<PanelEditor>)
   }, [splitterState.collapsed, setIsCollapsed]);
 
   return (
-    <>
+    <div style={{ height: '100%' }} ref={containerRef}>
       <NavToolbarActions dashboard={dashboard} />
       <div
         {...containerProps}
@@ -54,7 +59,7 @@ export function PanelEditorRenderer({ model }: SceneComponentProps<PanelEditor>)
         data-testid={selectors.components.PanelEditor.General.content}
       >
         <div {...primaryProps} className={cx(primaryProps.className, styles.body)}>
-          <VizAndDataPane model={model} />
+          <VizAndDataPane model={model} containerHeight={Math.max(containerHeight, 500)} />
         </div>
         <div {...splitterProps} />
         <div {...secondaryProps} className={cx(secondaryProps.className, styles.optionsPane)}>
@@ -77,11 +82,14 @@ export function PanelEditorRenderer({ model }: SceneComponentProps<PanelEditor>)
           {!splitterState.collapsed && !optionsPane && <Spinner />}
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
-function VizAndDataPane({ model }: SceneComponentProps<PanelEditor>) {
+function VizAndDataPane({
+  model,
+  containerHeight = 800,
+}: SceneComponentProps<PanelEditor> & { containerHeight?: number }) {
   const dashboard = getDashboardSceneFor(model);
   const { dataPane, showLibraryPanelSaveModal, showLibraryPanelUnlinkModal, tableView } = model.useState();
   const panel = model.getPanel();
@@ -107,7 +115,6 @@ function VizAndDataPane({ model }: SceneComponentProps<PanelEditor>) {
     rows.push(`${vizHeight}px`);
 
     if (dataPane) {
-      // rows.push(`${(containerHeight - vizHeight) + 40}px`);
       rows.push('auto');
       grid.push(['sidebar', 'data-pane']);
       if (sidebarState.size === SidebarSize.Full) {
@@ -118,10 +125,16 @@ function VizAndDataPane({ model }: SceneComponentProps<PanelEditor>) {
     }
 
     return {
+      height: containerHeight,
+      maxHeight: containerHeight,
       gridTemplateAreas: '\n' + grid.map((row) => `"${row.join(' ')}"`).join('\n'),
       gridTemplateRows: rows.map((r) => r).join(' '),
     };
-  }, [controls, dataPane, sidebarState.size, vizHeight]);
+  }, [controls, dataPane, sidebarState.size, vizHeight, containerHeight]);
+
+  if (!containerHeight) {
+    return null;
+  }
 
   return (
     <div className={styles.pageContainer} style={gridStyles}>
@@ -131,7 +144,11 @@ function VizAndDataPane({ model }: SceneComponentProps<PanelEditor>) {
         </div>
       )}
 
-      <div ref={vizRef} style={{ height: 550 }} className={cx(styles.viz, isScrollingLayout && styles.fixedSizeViz)}>
+      <div
+        className={cx(styles.viz, isScrollingLayout && styles.fixedSizeViz)}
+        ref={vizRef}
+        style={{ height: containerHeight / 2, maxHeight: containerHeight - 80 }}
+      >
         {tableView ? <tableView.Component model={tableView} /> : <panel.Component model={panel} />}
       </div>
 
@@ -215,9 +232,6 @@ function getStyles(theme: GrafanaTheme2, sidebarState: SidebarState) {
       display: 'grid',
       gap: theme.spacing(2),
       gridTemplateColumns: `auto 1fr`,
-      height: '100%',
-      minHeight: '100%',
-      maxHeight: '100%',
       overflow: 'hidden',
       [scrollReflowMediaQuery]: {
         gridTemplateColumns: `100%`,
@@ -238,14 +252,14 @@ function getStyles(theme: GrafanaTheme2, sidebarState: SidebarState) {
       overflow: 'auto',
       resize: 'vertical',
       height: '100%',
-      minHeight: 200,
-      maxHeight: 700, // FIXME: needs a dynamic height
+      minHeight: 100,
       ...(sidebarState.size === SidebarSize.Mini && {
         paddingLeft: theme.spacing(2),
       }),
     }),
     dataPane: css({
       gridArea: 'data-pane',
+      overflow: 'hidden',
     }),
     controlsWrapper: css({
       gridArea: 'controls',