Modals: Fix selects in modals (#33939)

packages/grafana-ui/src/components/Modal/getModalStyles.ts

@@ -68,9 +68,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme2) => {
     `,
     modalContent: css`
       padding: ${theme.spacing(3)};
-      overflow: auto;
       width: 100%;
-      max-height: calc(90vh - ${theme.spacing(4)});
     `,
     modalButtonRow: css`
       padding-top: ${theme.spacing(3)};

public/app/core/components/OrgSwitcher.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 
 import { getBackendSrv } from '@grafana/runtime';
 import { UserOrgDTO } from '@grafana/data';
-import { Modal, Button } from '@grafana/ui';
+import { Modal, Button, CustomScrollbar } from '@grafana/ui';
 
 import { contextSrv } from 'app/core/services/context_srv';
 import config from 'app/core/config';
+import { css } from '@emotion/css';
 
 interface Props {
   onDismiss: () => void;
@@ -43,35 +44,47 @@ export class OrgSwitcher extends React.PureComponent<Props, State> {
     const { orgs } = this.state;
 
     const currentOrgId = contextSrv.user.orgId;
+    const contentClassName = css({
+      display: 'flex',
+      maxHeight: 'calc(85vh - 42px)',
+    });
 
     return (
-      <Modal title="Switch Organization" icon="arrow-random" onDismiss={onDismiss} isOpen={true}>
+      <Modal
-        <table className="filter-table form-inline">
+        title="Switch Organization"
-          <thead>
+        icon="arrow-random"
-            <tr>
+        onDismiss={onDismiss}
-              <th>Name</th>
+        isOpen={true}
-              <th>Role</th>
+        contentClassName={contentClassName}
-              <th />
+      >
-            </tr>
+        <CustomScrollbar autoHeightMin="100%">
-          </thead>
+          <table className="filter-table form-inline">
-          <tbody>
+            <thead>
-            {orgs.map((org) => (
+              <tr>
-              <tr key={org.orgId}>
+                <th>Name</th>
-                <td>{org.name}</td>
+                <th>Role</th>
-                <td>{org.role}</td>
+                <th />
-                <td className="text-right">
-                  {org.orgId === currentOrgId ? (
-                    <Button size="sm">Current</Button>
-                  ) : (
-                    <Button variant="secondary" size="sm" onClick={() => this.setCurrentOrg(org)}>
-                      Switch to
-                    </Button>
-                  )}
-                </td>
               </tr>
-            ))}
+            </thead>
-          </tbody>
+            <tbody>
-        </table>
+              {orgs.map((org) => (
+                <tr key={org.orgId}>
+                  <td>{org.name}</td>
+                  <td>{org.role}</td>
+                  <td className="text-right">
+                    {org.orgId === currentOrgId ? (
+                      <Button size="sm">Current</Button>
+                    ) : (
+                      <Button variant="secondary" size="sm" onClick={() => this.setCurrentOrg(org)}>
+                        Switch to
+                      </Button>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CustomScrollbar>
       </Modal>
     );
   }