AzureMonitor: Fix resource selection growing over resource selection table (#71463)

* AzureMonitor: Fix resource selection growing over resource selection table

* Unstick ResourcePicker footer, fix sizing

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>
+    </>
   );
 };
 

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),
   }),