fix(automation): keep automation flows usable

Use the appropriate dialog sizes, keep the automation form scrollable, and preserve readable automation tables in narrow settings panels.
2026-09-12 17:49:37 +00:00 · 2026-09-12 16:53:45 +02:00
parent 5c6824d1fd
commit 240b630844
7 changed files with 20 additions and 23 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}>
@@ -0,0 +1,3 @@
+.table {
+  min-width: 36rem;
+}
@@ -12,6 +12,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;
@@ -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>