diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss
index b2e0dba86..4e34b8b7b 100644
--- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss
+++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss
@@ -27,13 +27,12 @@
.titleSection,
.filterSection,
.oscSection,
-.httpSection,
-.companionSection {
+.httpSection {
display: grid;
grid-gap: 0.5rem;
button {
- align-self: end;
+ align-self: flex-end;
}
}
@@ -41,10 +40,13 @@
.ruleSection,
.filterSection,
.oscSection,
-.httpSection,
-.companionSection {
- label {
+.httpSection {
+ label, div {
+ // we use the div as non-interactive placeholder for button cells
+ // it needs to match the size of the label element
font-size: calc(1rem - 3px);
+ }
+ label {
color: $label-gray;
}
}
diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx
index 853e998c0..383e34ed6 100644
--- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx
+++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx
@@ -212,8 +212,10 @@ export default function AutomationForm(props: AutomationFormProps) {
{...register(`filters.${index}.field`, { required: { value: true, message: 'Required field' } })}
size='sm'
variant='ontime'
- placeholder='Event field'
>
+
{fieldList.map(({ value, label }) => (
@@ -248,16 +252,21 @@ export default function AutomationForm(props: AutomationFormProps) {
autoComplete='off'
/>
- }
- variant='ontime-ghosted'
- size='sm'
- color='#FA5656' // $red-500
- onClick={() => removeFilter(index)}
- isDisabled={false}
- isLoading={false}
- />
+
+
+
+ }
+ variant='ontime-ghosted'
+ size='sm'
+ color='#FA5656' // $red-500
+ onClick={() => removeFilter(index)}
+ isDisabled={false}
+ isLoading={false}
+ />
+
+
))}
@@ -354,21 +363,24 @@ export default function AutomationForm(props: AutomationFormProps) {
/>
{rowErrors?.args?.message}
-
-
- }
- variant='ontime-ghosted'
- size='sm'
- onClick={() => removeOutput(index)}
- color='#FA5656' // $red-500
- isDisabled={false}
- isLoading={false}
- />
-
+
+
+
+
+ }
+ variant='ontime-ghosted'
+ size='sm'
+ onClick={() => removeOutput(index)}
+ color='#FA5656' // $red-500
+ isDisabled={false}
+ isLoading={false}
+ />
+
+
);
@@ -400,21 +412,24 @@ export default function AutomationForm(props: AutomationFormProps) {
/>
{rowErrors?.url?.message}
-
-
- }
- variant='ontime-ghosted'
- size='sm'
- onClick={() => removeOutput(index)}
- color='#FA5656' // $red-500
- isDisabled={false}
- isLoading={false}
- />
-
+
+
+
+
+ }
+ variant='ontime-ghosted'
+ size='sm'
+ onClick={() => removeOutput(index)}
+ color='#FA5656' // $red-500
+ isDisabled={false}
+ isLoading={false}
+ />
+
+
);
diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx b/apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx
index 8c4ba6ffc..953dd4c34 100644
--- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx
+++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx
@@ -77,7 +77,9 @@ export default function AutomationsList(props: AutomationsListProps) {
{arrayAutomations.length === 0 && (
- setAutomationFormData(automationPlaceholder)} />
+ setAutomationFormData(automationPlaceholder) : undefined}
+ />
)}
{arrayAutomations.map((automationId) => {
if (!Object.hasOwn(automations, automationId)) {