[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

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