Explore: Fix height on horizontal drawer and query inspector (#47832)

* Move tab height and horizontal drawer height to themable variables so they can be referred to. Add a default height to tabbed container so it can set an explicit height. Add overflow: scroll to inspector content

* Use height variable that changes on resize

* Use css to set height

packages/grafana-data/src/themes/createComponents.ts

@@ -39,6 +39,12 @@ export interface ThemeComponents {
   sidemenu: {
     width: number;
   };
+  menuTabs: {
+    height: number;
+  };
+  horizontalDrawer: {
+    defaultHeight: number;
+  };
 }
 
 export function createComponents(colors: ThemeColors, shadows: ThemeShadows): ThemeComponents {
@@ -82,5 +88,11 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
     sidemenu: {
       width: 48,
     },
+    menuTabs: {
+      height: 41,
+    },
+    horizontalDrawer: {
+      defaultHeight: 400,
+    },
   };
 }

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

@@ -28,7 +28,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
     tabContent: css`
       padding: ${theme.spacing(2)};
       background-color: ${theme.colors.background.primary};
-      height: 100%;
+      height: calc(100% - ${theme.components.menuTabs.height}px);
     `,
     close: css`
       position: absolute;

packages/grafana-ui/src/components/Tabs/TabsBar.tsx

@@ -23,7 +23,7 @@ const getTabsBarStyles = stylesFactory((theme: GrafanaTheme2, hideBorder = false
     tabs: css`
       position: relative;
       display: flex;
-      height: 41px;
+      height: ${theme.components.menuTabs.height}px;
     `,
   };
 });