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)) {