From 9cf561f3383e5cea4cf1ba496a03d525696b8de9 Mon Sep 17 00:00:00 2001
From: Luminessa Starlight <git@samsch.org>
Date: Thu, 28 Aug 2025 11:43:38 -0400
Subject: [PATCH] Accessibility: Constrain popups to screen height (#110241)

* limit ButtonSelect dropdown height to screen height and scroll the overflow

* limit color picker size to screen height and scroll if constrained
---
 packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx | 2 ++
 packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx   | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
index 43daedcbdb6..819d60746db 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
@@ -95,6 +95,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
       color: theme.colors.text.primary,
       maxWidth: '400px',
       fontSize: theme.typography.size.sm,
+      maxHeight: '100vh',
+      overflow: 'auto',
     }),
   };
 });
diff --git a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
index 3db07bcfcea..48d6788efc8 100644
--- a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
+++ b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
@@ -127,6 +127,8 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     menuWrapper: css({
       zIndex: theme.zIndex.dropdown,
+      maxHeight: '100vh',
+      overflow: 'auto',
     }),
   };
 };