[v10.0.x] InspectDrawer: Fixes issue with double scrollbars (#67888)

InspectDrawer: Fixes issue with double scrollbars (#67884)

* InspectDrawer: Fixes issue with double scrollbars

* Fixed minor issue

(cherry picked from commit fcb14d2548)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-ui/src/components/Table/Table.tsx

@@ -318,7 +318,14 @@ export const Table = memo((props: Props) => {
   };
 
   return (
-    <div {...getTableProps()} className={tableStyles.table} aria-label={ariaLabel} role="table" ref={tableDivRef}>
+    <div
+      {...getTableProps()}
+      className={tableStyles.table}
+      aria-label={ariaLabel}
+      role="table"
+      ref={tableDivRef}
+      style={{ width, height }}
+    >
       <CustomScrollbar hideVerticalTrack={true}>
         <div className={tableStyles.tableContentWrapper(totalColumnsWidth)}>
           {!noHeader && (

public/app/features/inspector/InspectDataTab.tsx

@@ -285,11 +285,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
                 return null;
               }
 
-              return (
-                <div style={{ width, height }}>
-                  <Table width={width} height={height} data={dataFrame} showTypeIcons={true} />
-                </div>
-              );
+              return <Table width={width} height={height} data={dataFrame} showTypeIcons={true} />;
             }}
           </AutoSizer>
         </div>

public/app/features/inspector/styles.ts

@@ -17,6 +17,7 @@ export const getPanelInspectorStyles2 = (theme: GrafanaTheme2) => {
       height: 100%;
       width: 100%;
       flex: 1 1 0;
+      min-height: 0;
     `,
     toolbar: css`
       display: flex;
@@ -32,7 +33,6 @@ export const getPanelInspectorStyles2 = (theme: GrafanaTheme2) => {
     content: css`
       flex-grow: 1;
       height: 100%;
-      overflow: scroll;
     `,
     editor: css`
       font-family: monospace;