fix(automation): keep automation flows usable

Use the appropriate dialog sizes, keep the automation form scrollable, preserve readable automation tables in narrow settings panels, clarify the project-wide scope of global triggers, and remove redundant recipe setup copy.
2026-09-13 10:09:35 +00:00 · 2026-09-12 16:53:45 +02:00
parent 5c6824d1fd
commit 95f04e8efc
7 changed files with 24 additions and 31 deletions
@@ -82,10 +82,12 @@ $card-padding: 2rem;
  color: $error-red;
 }

-// tables scroll with the panel rather than owning a nested scroll area,
-// which keeps the sticky table head anchored to the panel viewport
+// Tables retain the panel's vertical scroll so sticky headers remain anchored
+// to the panel viewport. They may scroll horizontally when their columns need
+// more room than a narrow settings panel can provide.
 .pad {
  padding: 0 var(--panel-card-padding, #{$card-padding});
+  overflow-x: auto;
 }

 .table {
@@ -1,14 +1,3 @@
-.form {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.formScroll {
-  height: 100%;
-}
-
 .outerColumn {
  display: flex;
  flex-direction: column;
@@ -22,7 +22,6 @@ import Input from '../../../../common/components/input/input/Input';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
 import Modal from '../../../../common/components/modal/Modal';
 import RadioGroup from '../../../../common/components/radio-group/RadioGroup';
-import ScrollArea from '../../../../common/components/scroll-area/ScrollArea';
 import Select from '../../../../common/components/select/Select';
 import Tag from '../../../../common/components/tag/Tag';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
@@ -245,11 +244,10 @@ export default function AutomationForm({ automation, triggers = [], onClose }: A
      onClose={onClose}
      showBackdrop
      showCloseButton
-      size='wide'
      title={isEdit ? 'Edit automation' : 'Create automation'}
      bodyElements={
-        <form id={formId} onSubmit={handleSubmit(onSubmit)} className={style.form}>
-          <ScrollArea className={style.formScroll} contentClassName={style.outerColumn}>
+        <form id={formId} onSubmit={handleSubmit(onSubmit)}>
+          <div className={style.outerColumn}>
            <div className={style.innerColumn}>
              <h3>Automation options</h3>
              <div className={style.titleSection}>
@@ -474,7 +472,7 @@ export default function AutomationForm({ automation, triggers = [], onClose }: A
                </DropdownMenu>
              </div>
            </div>
-          </ScrollArea>
+          </div>
        </form>
      }
      footerElements={
@@ -1,5 +1,9 @@
-.table td {
-  vertical-align: middle;
+.table {
+  min-width: 42rem;
+
+  td {
+    vertical-align: middle;
+  }
 }

 .tags {
@@ -89,7 +89,7 @@ function RecipePicker({ onClose, onStartEmpty, onSelect }: RecipePickerProps) {
      onClose={onClose}
      showBackdrop
      showCloseButton
-      size='compact'
+      size='default'
      title='New automation'
      bodyElements={
        <div className={style.picker}>
@@ -210,7 +210,6 @@ function RecipeSetup({ recipe, onClose, onBack, onCreated }: RecipeSetupProps) {
      onClose={onClose}
      showBackdrop
      showCloseButton
-      size='compact'
      title={recipe.title}
      bodyElements={
        <div className={style.setup}>
@@ -262,10 +261,6 @@ function RecipeSetup({ recipe, onClose, onBack, onCreated }: RecipeSetupProps) {
              ))}
            </div>
          )}
-
-          <Panel.Description>
-            Created as a normal automation, which you can edit or delete like any other.
-          </Panel.Description>
        </div>
      }
      footerElements={
@@ -0,0 +1,3 @@
+.table {
+  min-width: 36rem;
+}
@@ -5,6 +5,7 @@ import { IoAdd } from 'react-icons/io5';
 import { deleteTrigger } from '../../../../common/api/automation';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
+import Info from '../../../../common/components/info/Info';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
 import * as Panel from '../../panel-utils/PanelUtils';
 import useAppSettingsNavigation from '../../useAppSettingsNavigation';
@@ -12,6 +13,8 @@ import { checkDuplicates } from './automationUtils';
 import TriggerForm from './TriggerForm';
 import TriggersListItem from './TriggersListItem';

+import style from './TriggersList.module.scss';
+
 type FormState = {
  isOpen: boolean;
  trigger?: Trigger;
@@ -77,10 +80,9 @@ export default function TriggersList({ triggers, automations, isLoading }: Trigg
        </Panel.SubHeader>
        <Panel.Divider />
        <Panel.Section>
-          <Panel.Description>
-            Triggers are managed from the automation itself. This list is for naming them, or for pointing several
-            differently named triggers at the same automation.
-          </Panel.Description>
+          <Info>
+            <Info.Body>Actions in this section affect the entire project runtime, not just a single event.</Info.Body>
+          </Info>
          {duplicates && (
            <Panel.Error>
              You have created multiple links between the same trigger and automation. Duplicate combinations will only
@@ -94,7 +96,7 @@ export default function TriggersList({ triggers, automations, isLoading }: Trigg
                : `${orphans} triggers point at automations that no longer exist and will never run.`}
            </Panel.Error>
          )}
-          <Panel.Table>
+          <Panel.Table className={style.table}>
            <thead>
              <tr>
                <th style={{ width: '35%' }}>Title</th>