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;
`,
};
}