From 8bc31a4da506f59e992d6ca7a99cc419822c3170 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 8 Oct 2025 11:13:01 +0100
Subject: [PATCH] Modal: Sticky position buttons (#111991)

sticky position modal buttons
---
 .../grafana-ui/src/components/Modal/getModalStyles.ts  | 10 ++++++++--
 .../ValueMappingsEditor/ValueMappingsEditorModal.tsx   |  3 ---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
index d6ef33245b6..8defbe310a6 100644
--- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts
+++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
@@ -75,11 +75,17 @@ export const getModalStyles = (theme: GrafanaTheme2) => {
     }),
     modalContent: css({
       overflow: 'auto',
-      padding: theme.spacing(3),
+      padding: theme.spacing(3, 3, 0, 3),
+      marginBottom: theme.spacing(3),
+      scrollbarWidth: 'thin',
       width: '100%',
     }),
     modalButtonRow: css({
-      paddingTop: theme.spacing(3),
+      background: theme.colors.background.primary,
+      position: 'sticky',
+      bottom: 0,
+      paddingTop: theme.spacing(2),
+      zIndex: 1,
     }),
   };
 };
diff --git a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx
index 3bd9d7e7916..1ef25b5b2be 100644
--- a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx
+++ b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx
@@ -186,9 +186,6 @@ 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)',
-    overflow: 'auto',
     minHeight: '40px',
   }),