diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
index 9f0aa34f0ac..9847f8df418 100644
--- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts
+++ b/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',
diff --git a/public/app/features/datasources/components/picker/DataSourceModal.tsx b/public/app/features/datasources/components/picker/DataSourceModal.tsx
index 0bfa3ca2744..2fe830e0a9d 100644
--- a/public/app/features/datasources/components/picker/DataSourceModal.tsx
+++ b/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({
diff --git a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx
index 3a47e3f5c4c..3bd9d7e7916 100644
--- a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx
+++ b/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({