diff --git a/public/app/features/variables/editor/VariableEditorListRow.tsx b/public/app/features/variables/editor/VariableEditorListRow.tsx index 5b378bb0afb..6c094b2a364 100644 --- a/public/app/features/variables/editor/VariableEditorListRow.tsx +++ b/public/app/features/variables/editor/VariableEditorListRow.tsx @@ -79,41 +79,32 @@ export function VariableEditorListRow({ - - - - - - - - - { - event.preventDefault(); - reportInteraction('Duplicate variable'); - propsOnDuplicate(identifier); - }} - name="copy" - tooltip="Duplicate variable" - aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowDuplicateButtons(variable.name)} - /> - - - - { - event.preventDefault(); - reportInteraction('Delete variable'); - propsOnDelete(identifier); - }} - name="trash-alt" - tooltip="Remove variable" - aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowRemoveButtons(variable.name)} - /> - - -
- +
+ + + { + event.preventDefault(); + reportInteraction('Duplicate variable'); + propsOnDuplicate(identifier); + }} + name="copy" + tooltip="Duplicate variable" + aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowDuplicateButtons(variable.name)} + /> + { + event.preventDefault(); + reportInteraction('Delete variable'); + propsOnDelete(identifier); + }} + name="trash-alt" + tooltip="Remove variable" + aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowRemoveButtons(variable.name)} + /> +
+ +
@@ -166,6 +157,7 @@ function getStyles(theme: GrafanaTheme2) { return { dragHandle: css` cursor: grab; + margin-left: ${theme.spacing(1)}; `, column: css` width: 1%; @@ -185,9 +177,16 @@ function getStyles(theme: GrafanaTheme2) { `, iconPassed: css` color: ${theme.v1.palette.greenBase}; + margin-right: ${theme.spacing(2)}; `, iconFailed: css` color: ${theme.v1.palette.orange}; + margin-right: ${theme.spacing(2)}; + `, + icons: css` + display: flex; + gap: ${theme.spacing(2)}; + align-items: center; `, }; }