ResponsiveGrid: Adjust auto grid options positioning (#103591)

* adjust auto grid options positioning

* adjust padding

public/app/features/dashboard-scene/scene/layout-responsive-grid/ResponsiveGridLayoutManagerEditor.tsx

@@ -1,7 +1,9 @@
+import { css } from '@emotion/css';
 import { capitalize } from 'lodash';
 import React, { useEffect } from 'react';
 
-import { Button, Combobox, ComboboxOption, Field, InlineSwitch, Input, Stack } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, Combobox, ComboboxOption, Field, InlineSwitch, Input, Stack, useStyles2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
 
@@ -34,6 +36,7 @@ function GridLayoutColumns({ layoutManager }: { layoutManager: AutoGridLayoutMan
   const [inputRef, setInputRef] = React.useState<HTMLInputElement | null>(null);
   const [focusInput, setFocusInput] = React.useState(false);
   const [customMinWidthError, setCustomMinWidthError] = React.useState(false);
+  const styles = useStyles2(getStyles);
 
   useEffect(() => {
     if (focusInput && inputRef) {
@@ -87,7 +90,7 @@ function GridLayoutColumns({ layoutManager }: { layoutManager: AutoGridLayoutMan
   };
 
   return (
-    <Stack gap={2} justifyContent={'stretch'}>
+    <Stack columnGap={2} rowGap={0} wrap>
       <Field
         label={minWidthLabel}
         invalid={customMinWidthError}
@@ -96,6 +99,7 @@ function GridLayoutColumns({ layoutManager }: { layoutManager: AutoGridLayoutMan
             ? t('dashboard.auto-grid.options.min-width-error', 'A number between 50 and 2000 is required')
             : undefined
         }
+        className={styles.wideSelector}
       >
         {isStandardMinWidth ? (
           <Combobox options={minWidthOptions} value={columnWidth} onChange={onNamedMinWidthChanged} />
@@ -122,11 +126,12 @@ function GridLayoutColumns({ layoutManager }: { layoutManager: AutoGridLayoutMan
           />
         )}
       </Field>
-      <Field label={t('dashboard.auto-grid.options.max-columns', 'Max columns')}>
+      <Field label={t('dashboard.auto-grid.options.max-columns', 'Max columns')} className={styles.narrowSelector}>
         <Combobox
           options={colOptions}
           value={String(maxColumnCount)}
           onChange={({ value }) => layoutManager.onMaxColumnCountChanged(parseInt(value, 10))}
+          width={6.5}
         />
       </Field>
     </Stack>
@@ -138,6 +143,7 @@ function GridLayoutRows({ layoutManager }: { layoutManager: AutoGridLayoutManage
   const [inputRef, setInputRef] = React.useState<HTMLInputElement | null>(null);
   const [focusInput, setFocusInput] = React.useState(false);
   const [customMinWidthError, setCustomMinWidthError] = React.useState(false);
+  const styles = useStyles2(getStyles);
 
   useEffect(() => {
     if (focusInput && inputRef) {
@@ -189,7 +195,7 @@ function GridLayoutRows({ layoutManager }: { layoutManager: AutoGridLayoutManage
   };
 
   return (
-    <Stack gap={2} wrap={true}>
+    <Stack columnGap={2} rowGap={0} wrap>
       <Field
         label={rowHeightLabel}
         invalid={customMinWidthError}
@@ -198,15 +204,15 @@ function GridLayoutRows({ layoutManager }: { layoutManager: AutoGridLayoutManage
             ? t('dashboard.auto-grid.options.min-height-error', 'A number between 50 and 2000 is required')
             : undefined
         }
+        className={styles.wideSelector}
       >
         {isStandardHeight ? (
-          <Combobox options={minWidthOptions} value={rowHeight} onChange={onNamedMinHeightChanged} width={18} />
+          <Combobox options={minWidthOptions} value={rowHeight} onChange={onNamedMinHeightChanged} />
         ) : (
           <Input
             defaultValue={rowHeight}
             onBlur={onCustomHeightChanged}
             ref={(ref) => setInputRef(ref)}
-            width={18}
             type="number"
             min={50}
             max={2000}
@@ -225,9 +231,19 @@ function GridLayoutRows({ layoutManager }: { layoutManager: AutoGridLayoutManage
           />
         )}
       </Field>
-      <Field label={t('dashboard.auto-grid.options.height-fill', 'Fill screen')}>
+      <Field label={t('dashboard.auto-grid.options.height-fill', 'Fill screen')} className={styles.narrowSelector}>
         <InlineSwitch value={fillScreen} onChange={() => layoutManager.onFillScreenChanged(!fillScreen)} />
       </Field>
     </Stack>
   );
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  wideSelector: css({
+    minWidth: theme.spacing(14),
+    flex: `1 1 ${theme.spacing(14)}`,
+  }),
+  narrowSelector: css({
+    width: theme.spacing(10),
+  }),
+});

public/app/features/dashboard-scene/scene/layouts-shared/DashboardLayoutSelector.tsx

@@ -38,7 +38,7 @@ export function DashboardLayoutSelector({ layoutManager }: Props) {
   }));
 
   return (
-    <Box paddingBottom={1} display="flex" grow={1} alignItems="center">
+    <Box paddingBottom={2} display="flex" grow={1} alignItems="center">
       <RadioButtonGroup fullWidth value={layoutManager.descriptor} options={radioOptions} onChange={onChangeLayout} />
     </Box>
   );