diff --git a/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss b/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss index f29c3f757..816319a0b 100644 --- a/apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss +++ b/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, -// 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 { 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 031e84b36..9073182f8 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 @@ -1,14 +1,3 @@ -.form { - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; -} - -.formScroll { - height: 100%; -} - .outerColumn { display: flex; flex-direction: column; 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 325a5a513..7368a2f69 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 @@ -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={ -
- + +

Automation options

@@ -474,7 +472,7 @@ export default function AutomationForm({ automation, triggers = [], onClose }: A
- +
} footerElements={ diff --git a/apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.module.scss b/apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.module.scss index 785c4726f..4a6262f49 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.module.scss +++ b/apps/client/src/features/app-settings/panel/automations-panel/AutomationsList.module.scss @@ -1,5 +1,9 @@ -.table td { - vertical-align: middle; +.table { + min-width: 42rem; + + td { + vertical-align: middle; + } } .tags { diff --git a/apps/client/src/features/app-settings/panel/automations-panel/NewAutomationDialog.tsx b/apps/client/src/features/app-settings/panel/automations-panel/NewAutomationDialog.tsx index 1577df755..b21161a6d 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/NewAutomationDialog.tsx +++ b/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={
@@ -210,7 +210,6 @@ function RecipeSetup({ recipe, onClose, onBack, onCreated }: RecipeSetupProps) { onClose={onClose} showBackdrop showCloseButton - size='compact' title={recipe.title} bodyElements={
@@ -262,10 +261,6 @@ function RecipeSetup({ recipe, onClose, onBack, onCreated }: RecipeSetupProps) { ))}
)} - - - Created as a normal automation, which you can edit or delete like any other. -
} footerElements={ diff --git a/apps/client/src/features/app-settings/panel/automations-panel/TriggersList.module.scss b/apps/client/src/features/app-settings/panel/automations-panel/TriggersList.module.scss new file mode 100644 index 000000000..f788c5b0c --- /dev/null +++ b/apps/client/src/features/app-settings/panel/automations-panel/TriggersList.module.scss @@ -0,0 +1,3 @@ +.table { + min-width: 36rem; +} diff --git a/apps/client/src/features/app-settings/panel/automations-panel/TriggersList.tsx b/apps/client/src/features/app-settings/panel/automations-panel/TriggersList.tsx index 5e43c9139..7bd54cc29 100644 --- a/apps/client/src/features/app-settings/panel/automations-panel/TriggersList.tsx +++ b/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 - - Triggers are managed from the automation itself. This list is for naming them, or for pointing several - differently named triggers at the same automation. - + + Actions in this section affect the entire project runtime, not just a single event. + {duplicates && ( 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.`} )} - + Title