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.

apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss

@@ -82,10 +82,12 @@ $card-padding: 2rem;
   color: $error-red;
 }
 
-// tables scroll with the panel rather than owning a nested scroll area,
+// Tables retain the panel's vertical scroll so sticky headers remain anchored
-// which keeps the sticky table head anchored to the panel viewport
+// 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 {

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

@@ -1,14 +1,3 @@
-.form {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.formScroll {
-  height: 100%;
-}
-
 .outerColumn {
   display: flex;
   flex-direction: column;

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

@@ -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}>
+        <form id={formId} onSubmit={handleSubmit(onSubmit)}>
-          <ScrollArea className={style.formScroll} contentClassName={style.outerColumn}>
+          <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={

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

@@ -1,6 +1,10 @@
-.table td {
+.table {
+  min-width: 42rem;
+
+  td {
     vertical-align: middle;
   }
+}
 
 .tags {
   display: flex;

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

@@ -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={

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

@@ -0,0 +1,3 @@
+.table {
+  min-width: 36rem;
+}

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

@@ -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>
+          <Info>
-            Triggers are managed from the automation itself. This list is for naming them, or for pointing several
+            <Info.Body>Actions in this section affect the entire project runtime, not just a single event.</Info.Body>
-            differently named triggers at the same automation.
+          </Info>
-          </Panel.Description>
           {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>