refactor: improve form ux

apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.module.scss

@@ -27,13 +27,12 @@
 .titleSection,
 .filterSection,
 .oscSection,
-.httpSection,
+.httpSection {
-.companionSection {
   display: grid;
   grid-gap: 0.5rem;
 
   button {
-    align-self: end;
+    align-self: flex-end;
   }
 }
 
@@ -41,10 +40,13 @@
 .ruleSection,
 .filterSection,
 .oscSection,
-.httpSection,
+.httpSection {
-.companionSection {
+  label, div {
-  label {
+    // 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;
   }
 }

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'
                 >
+                  <option selected hidden disabled value=''>
+                    Event field
+                  </option>
                   {fieldList.map(({ value, label }) => (
                     <option key={value} value={value}>
                       {label}
@@ -228,8 +230,10 @@ export default function AutomationForm(props: AutomationFormProps) {
                   {...register(`filters.${index}.operator`, { required: { value: true, message: 'Required field' } })}
                   size='sm'
                   variant='ontime'
-                  placeholder='Operator'
                 >
+                  <option selected hidden disabled value=''>
+                    Operator
+                  </option>
                   <option value='equals'>equals</option>
                   <option value='not_equals'>not equals</option>
                   <option value='contains'>contains</option>
@@ -248,6 +252,9 @@ export default function AutomationForm(props: AutomationFormProps) {
                   autoComplete='off'
                 />
               </label>
+              <div>
+                <span>&nbsp;</span>
+                <div>
                   <IconButton
                     aria-label='Delete'
                     icon={<IoTrash />}
@@ -259,6 +266,8 @@ export default function AutomationForm(props: AutomationFormProps) {
                     isLoading={false}
                   />
                 </div>
+              </div>
+            </div>
           ))}
           <div>
             <Button
@@ -354,8 +363,10 @@ export default function AutomationForm(props: AutomationFormProps) {
                     />
                     <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
                   </label>
+                  <div>
+                    <span>&nbsp;</span>
                     <Panel.InlineElements relation='inner'>
-                    <Button size='sm' variant='ontime-ghosted' onClick={() => handleTestOSCOutput(index)}>
+                      <Button size='sm' variant='ontime-ghosted-white' onClick={() => handleTestOSCOutput(index)}>
                         Test
                       </Button>
                       <IconButton
@@ -371,6 +382,7 @@ export default function AutomationForm(props: AutomationFormProps) {
                     </Panel.InlineElements>
                   </div>
                 </div>
+              </div>
             );
           }
           if (isHTTPOutput(output)) {
@@ -400,8 +412,10 @@ export default function AutomationForm(props: AutomationFormProps) {
                     />
                     <Panel.Error>{rowErrors?.url?.message}</Panel.Error>
                   </label>
+                  <div>
+                    <span>&nbsp;</span>
                     <Panel.InlineElements relation='inner'>
-                    <Button size='sm' variant='ontime-ghosted' onClick={() => handleTestHTTPOutput(index)}>
+                      <Button size='sm' variant='ontime-ghosted-white' onClick={() => handleTestHTTPOutput(index)}>
                         Test
                       </Button>
                       <IconButton
@@ -417,6 +431,7 @@ export default function AutomationForm(props: AutomationFormProps) {
                     </Panel.InlineElements>
                   </div>
                 </div>
+              </div>
             );
           }
           // there should be no other output types

apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.tsx

@@ -77,7 +77,9 @@ export default function AutomationsList(props: AutomationsListProps) {
         </thead>
         <tbody>
           {arrayAutomations.length === 0 && (
-            <Panel.TableEmpty handleClick={() => setAutomationFormData(automationPlaceholder)} />
+            <Panel.TableEmpty
+              handleClick={!automationFormData ? () => setAutomationFormData(automationPlaceholder) : undefined}
+            />
           )}
           {arrayAutomations.map((automationId) => {
             if (!Object.hasOwn(automations, automationId)) {