fix: preserve layout validation errors

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx

@@ -126,19 +126,18 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
             disabled={nextBreakpoint === null || !baseLayout}
             onClick={() => {
               if (nextBreakpoint === null || !baseLayout) return;
-              const layouts = [
+              const newLayout: FormValues["layouts"][number] = {
-                ...form.values.layouts,
+                id: createId(),
-                {
+                name: tBoard("setting.section.layout.custom.defaultName"),
-                  id: createId(),
+                columnCount: baseLayout.columnCount,
-                  name: tBoard("setting.section.layout.custom.defaultName"),
+                leftGutterColumnCount: baseLayout.leftGutterColumnCount,
-                  columnCount: baseLayout.columnCount,
+                rightGutterColumnCount: baseLayout.rightGutterColumnCount,
-                  leftGutterColumnCount: baseLayout.leftGutterColumnCount,
+                breakpoint: nextBreakpoint,
-                  rightGutterColumnCount: baseLayout.rightGutterColumnCount,
+                role: "custom",
-                  breakpoint: nextBreakpoint,
+              };
-                  role: "custom" as const,
+              let insertionIndex = form.values.layouts.findIndex((layout) => layout.breakpoint > nextBreakpoint);
-                },
+              if (insertionIndex === -1) insertionIndex = form.values.layouts.length;
-              ].toSorted((layoutA, layoutB) => layoutA.breakpoint - layoutB.breakpoint);
+              form.insertListItem("layouts", newLayout, insertionIndex);
-              form.setFieldValue("layouts", layouts);
             }}
           >
             {tBoard("setting.section.layout.responsive.action.add")}