From a27ace5cfb24952bf4be0c83400293013e7d7d56 Mon Sep 17 00:00:00 2001
From: Luminessa Starlight <git@samsch.org>
Date: Fri, 12 Sep 2025 10:44:40 -0400
Subject: [PATCH] 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 f1d5a83abe4..f553cdb77b3 100644
--- a/public/app/features/dashboard-scene/scene/DashboardControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
@@ -152,10 +152,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>
       )}
       {(hasControlMenuVariables || hasControlMenuLinks) && (
         <Stack>
@@ -198,6 +198,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,
     }),
@@ -205,5 +206,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',
+    }),
   };
 }