From 409eae6ff974199c569df58ac2c55edde7377897 Mon Sep 17 00:00:00 2001
From: Adam Yeats <16296989+adamyeats@users.noreply.github.com>
Date: Mon, 17 Jul 2023 14:01:51 +0200
Subject: [PATCH] AzureMonitor: Fix resource selection growing over resource
 selection table (#71463)

* AzureMonitor: Fix resource selection growing over resource selection table

* Unstick ResourcePicker footer, fix sizing
---
 .../components/ResourcePicker/ResourcePicker.tsx   | 12 ++++++------
 .../components/ResourcePicker/styles.ts            | 14 ++++++++++----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/ResourcePicker.tsx b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/ResourcePicker.tsx
index 2bdc360abfe..e4771a40216 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/ResourcePicker.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/ResourcePicker.tsx
@@ -170,7 +170,7 @@ const ResourcePicker = ({
   );
 
   return (
-    <div>
+    <>
       <Search searchFn={handleSearch} />
       {shouldShowLimitFlag ? (
         <p className={styles.resultLimit}>Showing first {resourcePickerData.resultLimit} results</p>
@@ -188,7 +188,7 @@ const ResourcePicker = ({
         </thead>
       </table>
 
-      <div className={styles.tableScroller}>
+      <div className={cx(styles.scrollableTable, styles.tableScroller)}>
         <table className={styles.table}>
           <tbody>
             {isLoading && (
@@ -223,12 +223,12 @@ const ResourcePicker = ({
         </table>
       </div>
 
-      <div className={styles.selectionFooter}>
+      <footer className={styles.selectionFooter}>
         {selectedRows.length > 0 && (
           <>
             <h5>Selection</h5>
 
-            <div className={styles.tableScroller}>
+            <div className={cx(styles.scrollableTable, styles.selectedTableScroller)}>
               <table className={styles.table}>
                 <tbody>
                   {selectedRows.map((row) => (
@@ -282,8 +282,8 @@ const ResourcePicker = ({
             Apply
           </Button>
         </Modal.ButtonRow>
-      </div>
-    </div>
+      </footer>
+    </>
   );
 };
 
diff --git a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/styles.ts b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/styles.ts
index ecc2992500b..c3d88c9849b 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/styles.ts
+++ b/public/app/plugins/datasource/azuremonitor/components/ResourcePicker/styles.ts
@@ -6,11 +6,19 @@ const getStyles = (theme: GrafanaTheme2) => ({
   table: css({
     width: '100%',
     tableLayout: 'fixed',
+    overflow: 'scroll',
+  }),
+
+  scrollableTable: css({
+    overflow: 'auto',
   }),
 
   tableScroller: css({
-    maxHeight: '50vh',
-    overflow: 'auto',
+    maxHeight: '16vh',
+  }),
+
+  selectedTableScroller: css({
+    maxHeight: '13vh',
   }),
 
   header: css({
@@ -81,8 +89,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
   }),
 
   selectionFooter: css({
-    position: 'sticky',
-    bottom: 0,
     background: theme.colors.background.primary,
     paddingTop: theme.spacing(2),
   }),