Update form block autoscreens to render buttons at bottom and include quiet row action buttons

packages/builder/src/templates/rowActions.js

@@ -63,6 +63,7 @@ export const getRowActionButtonTemplates = async ({
         _instanceName: Helpers.uuid(),
         text: action.name,
         type: "primary",
+        quiet: true,
       }
     )
 

packages/builder/src/templates/screenTemplating/form.js

@@ -55,6 +55,7 @@ const form = async ({ tableOrView, type, permissions, screens }) => {
       actionType: getActionType(type),
       title: getTitle(type),
       rowId: type === "new" ? undefined : `{{ url.id }}`,
+      buttonPosition: "bottom",
     })
     .instanceName(`${tableOrView.name} - Form block`)
     .json()
@@ -69,6 +70,11 @@ const form = async ({ tableOrView, type, permissions, screens }) => {
     })
     if (rowActionButtons.length) {
       formBlock.buttons = [...(formBlock.buttons || []), ...rowActionButtons]
+
+      // Collapse buttons if more than 3 row actions
+      if (rowActionButtons.length > 3) {
+        formBlock.buttonsCollapsed = true
+      }
     }
   }
 

packages/client/src/components/app/blocks/form/InnerFormBlock.svelte

@@ -113,7 +113,7 @@
         }}
         styles={{
           normal: {
-            "margin-top": "16",
+            "margin-top": "24",
           },
         }}
         order={1}

packages/frontend-core/src/utils/utils.js

@@ -240,7 +240,7 @@ export const buildFormBlockButtonConfig = props => {
       _component: "@budibase/standard-components/button",
       onClick: onDelete,
       quiet: true,
-      type: "secondary",
+      type: "warning",
     })
   }