Dynamic dashboards: Fix empty space under time controls when dashboard has many variables (#113765)

* fix space under time controls by using floats instead of flex

* remove commented out styles

* adjust spacing: use marginBottom and reduce bottom padding

* make Add variable button float inline with variables

public/app/features/dashboard-scene/scene/DashboardControls.tsx

@@ -163,23 +163,20 @@ function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardContr
       data-testid={selectors.pages.Dashboard.Controls}
       className={cx(styles.controls, editPanel && styles.controlsPanelEdit)}
     >
-      <Stack grow={1} wrap={'wrap'}>
-        {!hideVariableControls && (
-          <>
-            <VariableControls dashboard={dashboard} />
-            <DashboardDataLayerControls dashboard={dashboard} />
-          </>
-        )}
-        <Box grow={1} />
-        {!hideLinksControls && !editPanel && <DashboardLinksControls links={links} dashboard={dashboard} />}
-        {editPanel && <PanelEditControls panelEditor={editPanel} />}
-      </Stack>
       {!hideTimeControls && (
         <div className={cx(styles.timeControls, editPanel && styles.timeControlsWrap)}>
           <timePicker.Component model={timePicker} />
           <refreshPicker.Component model={refreshPicker} />
         </div>
       )}
+      {!hideVariableControls && (
+        <>
+          <VariableControls dashboard={dashboard} />
+          <DashboardDataLayerControls dashboard={dashboard} />
+        </>
+      )}
+      {!hideLinksControls && !editPanel && <DashboardLinksControls links={links} dashboard={dashboard} />}
+      {editPanel && <PanelEditControls panelEditor={editPanel} />}
       {!hideDashboardControls && model.hasDashboardControls() && (
         <Stack>
           <DashboardControlsButton dashboard={dashboard} />
@@ -208,11 +205,8 @@ function renderHiddenVariables(dashboard: DashboardScene) {
 function getStyles(theme: GrafanaTheme2) {
   return {
     controls: css({
-      display: 'flex',
-      alignItems: 'flex-start',
-      flex: '100%',
       gap: theme.spacing(1),
-      padding: theme.spacing(2),
+      padding: theme.spacing(2, 2, 1, 2),
       flexDirection: 'row',
       flexWrap: 'nowrap',
       position: 'relative',
@@ -240,6 +234,8 @@ function getStyles(theme: GrafanaTheme2) {
       display: 'flex',
       justifyContent: 'flex-end',
       gap: theme.spacing(1),
+      marginBottom: theme.spacing(1),
+      float: 'right',
     }),
     timeControlsWrap: css({
       flexWrap: 'wrap',

public/app/features/dashboard-scene/scene/VariableControls.tsx

@@ -19,6 +19,7 @@ import { AddVariableButton } from './VariableControlsAddButton';
 
 export function VariableControls({ dashboard }: { dashboard: DashboardScene }) {
   const { variables } = sceneGraph.getVariables(dashboard)!.useState();
+  const styles = useStyles2(getStyles);
 
   return (
     <>
@@ -27,7 +28,11 @@ export function VariableControls({ dashboard }: { dashboard: DashboardScene }) {
         .map((variable) => (
           <VariableValueSelectWrapper key={variable.state.key} variable={variable} />
         ))}
-      {config.featureToggles.dashboardNewLayouts ? <AddVariableButton dashboard={dashboard} /> : null}
+      {config.featureToggles.dashboardNewLayouts ? (
+        <div className={styles.addButton}>
+          <AddVariableButton dashboard={dashboard} />
+        </div>
+      ) : null}
     </>
   );
 }
@@ -105,7 +110,7 @@ export function VariableValueSelectWrapper({ variable, inMenu }: VariableSelectP
       onPointerDown={onPointerDown}
       data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}
     >
-      <VariableLabel variable={variable} className={cx(isSelectable && styles.labelSelectable)} />
+      <VariableLabel variable={variable} className={cx(isSelectable && styles.labelSelectable, styles.label)} />
       <variable.Component model={variable} />
     </div>
   );
@@ -145,12 +150,16 @@ function VariableLabel({
 
 const getStyles = (theme: GrafanaTheme2) => ({
   container: css({
-    display: 'flex',
+    display: 'inline-flex',
+    alignItems: 'center',
+    verticalAlign: 'middle',
     // No border for second element (inputs) as label and input border is shared
     '> :nth-child(2)': css({
       borderTopLeftRadius: 'unset',
       borderBottomLeftRadius: 'unset',
     }),
+    marginBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
   }),
   verticalContainer: css({
     display: 'flex',
@@ -176,4 +185,15 @@ const getStyles = (theme: GrafanaTheme2) => ({
   labelSelectable: css({
     cursor: 'pointer',
   }),
+  label: css({
+    display: 'flex',
+    alignItems: 'center',
+  }),
+  addButton: css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    verticalAlign: 'middle',
+    marginBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+  }),
 });