Modal: Sticky position buttons (#111991)

sticky position modal buttons

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

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