From 71ffa5d1be787ef238dfd2a4615ce61d02d8d61b Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.dev>
Date: Sun, 23 Aug 2026 00:59:02 +0200
Subject: [PATCH] fix: keep responsive layout editors stable

---
 .../app/[locale]/boards/[name]/settings/_layout.tsx    | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx
index 20bd78ba3..abc2ac077 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx
@@ -111,9 +111,6 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
 
   const nextBreakpoint = getNextCustomBreakpoint(form.values.layouts);
   const baseLayout = form.values.layouts.find((layout) => layout.role === "base");
-  const sortedLayouts = form.values.layouts
-    .map((layout, index) => ({ layout, index }))
-    .toSorted((entryA, entryB) => entryA.layout.breakpoint - entryB.layout.breakpoint);
 
   return (
     <SectionCard title={tBoard("setting.section.layout.title")}>
@@ -129,7 +126,7 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
             disabled={nextBreakpoint === null || !baseLayout}
             onClick={() => {
               if (nextBreakpoint === null || !baseLayout) return;
-              form.setFieldValue("layouts", [
+              const layouts = [
                 ...form.values.layouts,
                 {
                   id: createId(),
@@ -140,14 +137,15 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
                   breakpoint: nextBreakpoint,
                   role: "custom",
                 },
-              ]);
+              ].toSorted((layoutA, layoutB) => layoutA.breakpoint - layoutB.breakpoint);
+              form.setFieldValue("layouts", layouts);
             }}
           >
             {tBoard("setting.section.layout.responsive.action.add")}
           </Button>
         </Group>
 
-        {sortedLayouts.map(({ layout, index }) => {
+        {form.values.layouts.map((layout, index) => {
           const persistedLayout = board.layouts.find((candidate) => candidate.id === layout.id);
           const sourceLayout = persistedLayout ?? board.layouts.find((candidate) => candidate.role === "base");
           const customBreakpoints = form.values.layouts