From 06bf567e1c3dc77233befb26fcb180d800534a5d Mon Sep 17 00:00:00 2001
From: Luminessa Starlight <git@samsch.org>
Date: Mon, 15 Sep 2025 10:46:58 -0400
Subject: [PATCH] [release-12.2.1]: Accessibility: enable responsive reflow of
 variables in dashboard edit (#111033)

Accessibility: enable responsive reflow of variables in dashboard edit (#110967)

enable responsive reflow of variables in dashboard edit
---
 .../dashboard-scene/scene/DashboardControls.tsx    | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/DashboardControls.tsx b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
index be1ea0c844d..3b495c75ac4 100644
--- a/public/app/features/dashboard-scene/scene/DashboardControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
@@ -147,10 +147,10 @@ function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardContr
         {editPanel && <PanelEditControls panelEditor={editPanel} />}
       </Stack>
       {!hideTimeControls && (
-        <Stack justifyContent="flex-end">
+        <div className={cx(styles.timeControls, editPanel && styles.timeControlsWrap)}>
           <timePicker.Component model={timePicker} />
           <refreshPicker.Component model={refreshPicker} />
-        </Stack>
+        </div>
       )}
       <Stack>
         <DropdownVariableControls dashboard={dashboard} />
@@ -191,6 +191,7 @@ function getStyles(theme: GrafanaTheme2) {
       },
     }),
     controlsPanelEdit: css({
+      flexWrap: 'wrap-reverse',
       // In panel edit we do not need any right padding as the splitter is providing it
       paddingRight: 0,
     }),
@@ -198,5 +199,14 @@ function getStyles(theme: GrafanaTheme2) {
       background: 'unset',
       position: 'unset',
     }),
+    timeControls: css({
+      display: 'flex',
+      justifyContent: 'flex-end',
+      gap: theme.spacing(1),
+    }),
+    timeControlsWrap: css({
+      flexWrap: 'wrap',
+      marginLeft: 'auto',
+    }),
   };
 }