Modal: Center modals at smaller screen heights (#109256)

* centre and fill modals at smaller heights

* fix datasourcemodal styling

* ensure modal height remains similar to before

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

@@ -25,6 +25,13 @@ export const getModalStyles = (theme: GrafanaTheme2) => {
       maxHeight: '80%',
       display: 'flex',
       flexDirection: 'column',
+      // Centre the modal vertically on smaller height screens
+      // this allows us to fill the full height for maximum usability
+      ['@media (max-height: 750px)']: {
+        maxHeight: '100%',
+        top: '50%',
+        transform: 'translateY(-50%)',
+      },
     }),
     modalBackdrop: css({
       position: 'fixed',

public/app/features/datasources/components/picker/DataSourceModal.tsx

@@ -239,9 +239,8 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
   return {
     modal: css({
       width: '80%',
-      height: '80%',
       maxWidth: '1200px',
-      maxHeight: '900px',
+      minHeight: '80%',
 
       [theme.breakpoints.down('md')]: {
         width: '100%',
@@ -250,7 +249,7 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
     modalContent: css({
       display: 'flex',
       flexDirection: 'row',
-      height: '100%',
+      flex: 1,
 
       [theme.breakpoints.down('md')]: {
         flexDirection: 'column',
@@ -260,7 +259,7 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
       display: 'flex',
       flexDirection: 'column',
       width: '50%',
-      height: '100%',
+      maxHeight: '100%',
       paddingRight: theme.spacing(4),
       borderRight: `1px solid ${theme.colors.border.weak}`,
 
@@ -276,7 +275,7 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
       display: 'flex',
       flexDirection: 'column',
       width: '50%',
-      height: '100%',
+      minHeight: '100%',
       justifyItems: 'space-evenly',
       alignItems: 'stretch',
       paddingLeft: theme.spacing(4),
@@ -284,7 +283,7 @@ function getDataSourceModalStyles(theme: GrafanaTheme2) {
       [theme.breakpoints.down('md')]: {
         width: '100%',
         paddingLeft: 0,
-        flex: 0,
+        flexShrink: 0,
       },
     }),
     builtInDataSources: css({

public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx

@@ -186,9 +186,10 @@ export function ValueMappingsEditorModal({ value, onChange, onClose, showIconPic
 
 export const getStyles = (theme: GrafanaTheme2) => ({
   tableWrap: css({
+    // TODO remove maxHeight/overflow when Modal.ButtonRow is sticky
     maxHeight: 'calc(80vh - 170px)',
-    minHeight: '40px',
     overflow: 'auto',
+    minHeight: '40px',
   }),
 
   editTable: css({