fix: keep mobile board widgets unchanged

packages/api/src/router/board.ts

@@ -49,6 +49,7 @@ import {
   boardDuplicateSchema,
   boardRenameSchema,
   boardSaveLayoutSchema,
+  boardSaveLayoutsSchema,
   boardSavePartialSettingsSchema,
   boardSavePermissionsSchema,
   boardSaveSchema,
@@ -687,7 +688,7 @@ export const boardRouter = createTRPCRouter({
       mcp: {
         enabled: true,
         description:
-          "Set a board's desktop column count and remove legacy responsive layouts. Requires modify permission. REQUIRED: id (board ID), columnCount (1-24)",
+          "Set a board's desktop column count while preserving saved responsive layouts. Requires modify permission. REQUIRED: id (board ID), columnCount (1-24)",
       },
     })
     .input(boardSaveLayoutSchema)
@@ -761,12 +762,8 @@ export const boardRouter = createTRPCRouter({
 
             await transaction
               .update(schema.layouts)
-              .set({ name: "Base", columnCount: input.columnCount, breakpoint: 0 })
+              .set({ columnCount: input.columnCount })
               .where(eq(schema.layouts.id, desktopLayout.id));
-
-            await transaction
-              .delete(schema.layouts)
-              .where(and(eq(schema.layouts.boardId, board.id), not(eq(schema.layouts.id, desktopLayout.id))));
           });
         },
         handleSync(db) {
@@ -811,18 +808,230 @@ export const boardRouter = createTRPCRouter({
 
             transaction
               .update(layouts)
-              .set({ name: "Base", columnCount: input.columnCount, breakpoint: 0 })
+              .set({ columnCount: input.columnCount })
               .where(eq(layouts.id, desktopLayout.id))
               .run();
-
-            transaction
-              .delete(layouts)
-              .where(and(eq(layouts.boardId, board.id), not(eq(layouts.id, desktopLayout.id))))
-              .run();
           });
         },
       });
     }),
+  saveLayouts: protectedProcedure
+    .input(boardSaveLayoutsSchema)
+    .output(boardSaveLayoutsSchema.shape.layouts)
+    .mutation(async ({ ctx, input }) => {
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "modify");
+
+      const board = await getFullBoardWithWhereAsync(ctx.db, eq(boards.id, input.id), ctx.session.user.id);
+      const addedLayouts = filterAddedItems(input.layouts, board.layouts);
+      const layoutsToInsert: InferInsertModel<typeof layouts>[] = [];
+      const itemSectionLayoutsToInsert: InferInsertModel<typeof itemLayouts>[] = [];
+      const sectionLayoutsToInsert: InferInsertModel<typeof sectionLayouts>[] = [];
+      const savedLayoutIds = new Map<string, string>();
+
+      for (const addedLayout of addedLayouts) {
+        const layoutId = createId();
+        savedLayoutIds.set(addedLayout.id, layoutId);
+
+        layoutsToInsert.push({
+          id: layoutId,
+          name: addedLayout.name,
+          columnCount: addedLayout.columnCount,
+          breakpoint: addedLayout.breakpoint,
+          boardId: board.id,
+        });
+
+        const sortedLayouts = board.layouts.toSorted((layoutA, layoutB) => layoutA.columnCount - layoutB.columnCount);
+        const layoutToClone =
+          sortedLayouts.find((layout) => layout.columnCount >= addedLayout.columnCount) ?? sortedLayouts.at(-1);
+
+        if (!layoutToClone) {
+          throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "Board must have a layout" });
+        }
+
+        const updatedBoardLayout = getUpdatedBoardLayout(board, {
+          previous: {
+            layoutId: layoutToClone.id,
+            columnCount: layoutToClone.columnCount,
+          },
+          current: {
+            layoutId,
+            columnCount: addedLayout.columnCount,
+          },
+        });
+
+        itemSectionLayoutsToInsert.push(...updatedBoardLayout.itemSectionLayouts);
+        sectionLayoutsToInsert.push(...updatedBoardLayout.sectionLayouts);
+      }
+
+      const updatedLayouts = filterUpdatedItems(input.layouts, board.layouts);
+      const itemSectionLayoutsToUpdate: InferInsertModel<typeof itemLayouts>[] = [];
+      const sectionLayoutsToUpdate: InferInsertModel<typeof sectionLayouts>[] = [];
+      const layoutsToUpdate: typeof input.layouts = [];
+
+      for (const updatedLayout of updatedLayouts) {
+        const dbLayout = board.layouts.find((layout) => layout.id === updatedLayout.id);
+        if (!dbLayout) continue;
+
+        if (dbLayout.columnCount !== updatedLayout.columnCount) {
+          const updatedBoardLayout = getUpdatedBoardLayout(board, {
+            previous: {
+              layoutId: dbLayout.id,
+              columnCount: dbLayout.columnCount,
+            },
+            current: {
+              layoutId: dbLayout.id,
+              columnCount: updatedLayout.columnCount,
+            },
+          });
+
+          itemSectionLayoutsToUpdate.push(...updatedBoardLayout.itemSectionLayouts);
+          sectionLayoutsToUpdate.push(...updatedBoardLayout.sectionLayouts);
+        }
+
+        layoutsToUpdate.push(updatedLayout);
+      }
+
+      const removedLayoutIds = filterRemovedItems(input.layouts, board.layouts).map((layout) => layout.id);
+
+      await handleTransactionsAsync(ctx.db, {
+        async handleAsync(db, schema) {
+          await db.transaction(async (transaction) => {
+            if (layoutsToInsert.length > 0) {
+              await transaction.insert(schema.layouts).values(layoutsToInsert);
+            }
+            if (itemSectionLayoutsToInsert.length > 0) {
+              await transaction.insert(schema.itemLayouts).values(itemSectionLayoutsToInsert);
+            }
+            if (sectionLayoutsToInsert.length > 0) {
+              await transaction.insert(schema.sectionLayouts).values(sectionLayoutsToInsert);
+            }
+
+            for (const itemSectionLayout of itemSectionLayoutsToUpdate) {
+              await transaction
+                .update(schema.itemLayouts)
+                .set({
+                  height: itemSectionLayout.height,
+                  width: itemSectionLayout.width,
+                  xOffset: itemSectionLayout.xOffset,
+                  yOffset: itemSectionLayout.yOffset,
+                  sectionId: itemSectionLayout.sectionId,
+                })
+                .where(
+                  and(
+                    eq(schema.itemLayouts.itemId, itemSectionLayout.itemId),
+                    eq(schema.itemLayouts.layoutId, itemSectionLayout.layoutId),
+                  ),
+                );
+            }
+
+            for (const sectionLayout of sectionLayoutsToUpdate) {
+              await transaction
+                .update(schema.sectionLayouts)
+                .set({
+                  height: sectionLayout.height,
+                  width: sectionLayout.width,
+                  xOffset: sectionLayout.xOffset,
+                  yOffset: sectionLayout.yOffset,
+                  parentSectionId: sectionLayout.parentSectionId,
+                })
+                .where(
+                  and(
+                    eq(schema.sectionLayouts.sectionId, sectionLayout.sectionId),
+                    eq(schema.sectionLayouts.layoutId, sectionLayout.layoutId),
+                  ),
+                );
+            }
+
+            for (const layout of layoutsToUpdate) {
+              await transaction
+                .update(schema.layouts)
+                .set({
+                  name: layout.name,
+                  columnCount: layout.columnCount,
+                  breakpoint: layout.breakpoint,
+                })
+                .where(eq(schema.layouts.id, layout.id));
+            }
+
+            if (removedLayoutIds.length > 0) {
+              await transaction.delete(schema.layouts).where(inArray(schema.layouts.id, removedLayoutIds));
+            }
+          });
+        },
+        handleSync(db) {
+          db.transaction((transaction) => {
+            if (layoutsToInsert.length > 0) {
+              transaction.insert(layouts).values(layoutsToInsert).run();
+            }
+            if (itemSectionLayoutsToInsert.length > 0) {
+              transaction.insert(itemLayouts).values(itemSectionLayoutsToInsert).run();
+            }
+            if (sectionLayoutsToInsert.length > 0) {
+              transaction.insert(sectionLayouts).values(sectionLayoutsToInsert).run();
+            }
+
+            for (const itemSectionLayout of itemSectionLayoutsToUpdate) {
+              transaction
+                .update(itemLayouts)
+                .set({
+                  height: itemSectionLayout.height,
+                  width: itemSectionLayout.width,
+                  xOffset: itemSectionLayout.xOffset,
+                  yOffset: itemSectionLayout.yOffset,
+                  sectionId: itemSectionLayout.sectionId,
+                })
+                .where(
+                  and(
+                    eq(itemLayouts.itemId, itemSectionLayout.itemId),
+                    eq(itemLayouts.layoutId, itemSectionLayout.layoutId),
+                  ),
+                )
+                .run();
+            }
+
+            for (const sectionLayout of sectionLayoutsToUpdate) {
+              transaction
+                .update(sectionLayouts)
+                .set({
+                  height: sectionLayout.height,
+                  width: sectionLayout.width,
+                  xOffset: sectionLayout.xOffset,
+                  yOffset: sectionLayout.yOffset,
+                  parentSectionId: sectionLayout.parentSectionId,
+                })
+                .where(
+                  and(
+                    eq(sectionLayouts.sectionId, sectionLayout.sectionId),
+                    eq(sectionLayouts.layoutId, sectionLayout.layoutId),
+                  ),
+                )
+                .run();
+            }
+
+            for (const layout of layoutsToUpdate) {
+              transaction
+                .update(layouts)
+                .set({
+                  name: layout.name,
+                  columnCount: layout.columnCount,
+                  breakpoint: layout.breakpoint,
+                })
+                .where(eq(layouts.id, layout.id))
+                .run();
+            }
+
+            if (removedLayoutIds.length > 0) {
+              transaction.delete(layouts).where(inArray(layouts.id, removedLayoutIds)).run();
+            }
+          });
+        },
+      });
+
+      return input.layouts.map((layout) => ({
+        ...layout,
+        id: savedLayoutIds.get(layout.id) ?? layout.id,
+      }));
+    }),
   savePartialBoardSettings: protectedProcedure
     .meta({
       openapi: { method: "PATCH", path: "/api/boards/{id}/settings", tags: ["boards"], protect: true },
@@ -1491,16 +1700,16 @@ export const boardRouter = createTRPCRouter({
       }
 
       const itemId = createId();
-
-      await ctx.db.insert(items).values({
+      const itemRow = {
         id: itemId,
         boardId: input.boardId,
         kind: input.kind,
         options: superjson.stringify(input.options),
         advancedOptions: emptySuperJSON,
-      });
+      };
 
       const layoutRows: (typeof itemLayouts.$inferInsert)[] = [];
+      const defaultSize = widgetDefaultSizes[input.kind as WidgetKind] ?? { width: 1, height: 1 };
 
       for (const layout of board.layouts) {
         const existingInSection = board.items
@@ -1519,14 +1728,17 @@ export const boardRouter = createTRPCRouter({
           }
         }
 
-        const defaultSize = widgetDefaultSizes[input.kind as WidgetKind] ?? { width: 1, height: 1 };
+        const layoutItemSize = {
+          ...defaultSize,
+          width: Math.min(defaultSize.width, layout.columnCount),
+        };
 
         const fitsAt = (x: number, y: number) => {
-          if (x + defaultSize.width > layout.columnCount) return false;
-          for (let dy = 0; dy < defaultSize.height; dy++) {
+          if (x + layoutItemSize.width > layout.columnCount) return false;
+          for (let dy = 0; dy < layoutItemSize.height; dy++) {
             const row = occupied[y + dy];
             if (!row) continue;
-            for (let dx = 0; dx < defaultSize.width; dx++) {
+            for (let dx = 0; dx < layoutItemSize.width; dx++) {
               if (row[x + dx]) return false;
             }
           }
@@ -1544,8 +1756,8 @@ export const boardRouter = createTRPCRouter({
                 layoutId: layout.id,
                 xOffset: x,
                 yOffset: y,
-                width: defaultSize.width,
-                height: defaultSize.height,
+                width: layoutItemSize.width,
+                height: layoutItemSize.height,
               });
               placed = true;
             }
@@ -1560,15 +1772,32 @@ export const boardRouter = createTRPCRouter({
         }
       }
 
-      if (layoutRows.length > 0) {
-        await ctx.db.insert(itemLayouts).values(layoutRows);
-      }
+      const integrationRows = input.integrationIds.map((integrationId) => ({ itemId, integrationId }));
 
-      if (input.integrationIds.length > 0) {
-        await ctx.db
-          .insert(integrationItems)
-          .values(input.integrationIds.map((integrationId) => ({ itemId, integrationId })));
-      }
+      await handleTransactionsAsync(ctx.db, {
+        async handleAsync(db, schema) {
+          await db.transaction(async (transaction) => {
+            await transaction.insert(schema.items).values(itemRow);
+            if (layoutRows.length > 0) {
+              await transaction.insert(schema.itemLayouts).values(layoutRows);
+            }
+            if (integrationRows.length > 0) {
+              await transaction.insert(schema.integrationItems).values(integrationRows);
+            }
+          });
+        },
+        handleSync(db) {
+          db.transaction((transaction) => {
+            transaction.insert(items).values(itemRow).run();
+            if (layoutRows.length > 0) {
+              transaction.insert(itemLayouts).values(layoutRows).run();
+            }
+            if (integrationRows.length > 0) {
+              transaction.insert(integrationItems).values(integrationRows).run();
+            }
+          });
+        },
+      });
 
       return { itemId };
     }),
@@ -1592,6 +1821,9 @@ const getHomeIdBoardAsync = async (
   user: InferSelectModel<typeof users> | null,
   deviceType: DeviceType,
 ) => {
+  // Mobile home-board selection remains device-based because the server does
+  // not know the resolved CSS viewport. Tablet rendering is resolved against
+  // 48em on the client and must not be guessed here.
   const settingKey = deviceType === "mobile" ? "mobileHomeBoardId" : "homeBoardId";
 
   if (!user) {
@@ -1613,8 +1845,7 @@ const getHomeIdBoardAsync = async (
       and(
         eq(groupMembers.userId, user.id),
         not(eq(groups.name, everyoneGroup)),
-        not(isNull(groups[settingKey])),
-        not(isNull(groups.homeBoardId)),
+        or(not(isNull(groups[settingKey])), not(isNull(groups.homeBoardId))),
       ),
     )
     .orderBy(asc(groups.position))

packages/api/src/router/serverSettings.ts

@@ -5,10 +5,10 @@ import { and, eq, inArray } from "@homarr/db";
 import {
   getServerSettingByKeyAsync,
   getServerSettingsAsync,
-  insertServerSettingByKeyAsync,
+  mergeServerSettingByKeyAsync,
   updateServerSettingByKeyAsync,
 } from "@homarr/db/queries";
-import { boards, serverSettings } from "@homarr/db/schema";
+import { boards } from "@homarr/db/schema";
 import type { ServerSettings } from "@homarr/server-settings";
 import { defaultServerSettingsKeys } from "@homarr/server-settings";
 import { settingsInitSchema } from "@homarr/validation/settings";
@@ -19,6 +19,7 @@ import { nextOnboardingStepAsync } from "./onboard/onboard-queries";
 const boardServerSettingsSchema = z.object({
   homeBoardId: z.string().nullable(),
   mobileHomeBoardId: z.string().nullable(),
+  enableAutomaticMobileLayout: z.boolean(),
   enableStatusByDefault: z.boolean(),
   forceDisableStatus: z.boolean(),
 }) satisfies z.ZodType<ServerSettings["board"]>;
@@ -39,7 +40,7 @@ export const serverSettingsRouter = createTRPCRouter({
       mcp: {
         enabled: true,
         description:
-          "Get global board defaults, including desktop/mobile home board IDs and status behavior. Requires admin permission",
+          "Get global board defaults, including desktop/mobile home board IDs, automatic mobile layout mode, and status behavior. Requires admin permission",
       },
     })
     .input(z.void())
@@ -54,7 +55,7 @@ export const serverSettingsRouter = createTRPCRouter({
       mcp: {
         enabled: true,
         description:
-          "Update global board defaults. Requires admin permission. Optional fields: homeBoardId, mobileHomeBoardId, enableStatusByDefault, forceDisableStatus. Home board IDs must reference public boards or be null",
+          "Update global board defaults. Requires admin permission. Optional fields: homeBoardId, mobileHomeBoardId, enableAutomaticMobileLayout, enableStatusByDefault, forceDisableStatus. Home board IDs must reference public boards or be null",
       },
     })
     .input(boardServerSettingsUpdateSchema)
@@ -81,17 +82,9 @@ export const serverSettingsRouter = createTRPCRouter({
 
       const current = await getServerSettingByKeyAsync(ctx.db, "board");
       const next = { ...current, ...input };
-      const existing = await ctx.db.query.serverSettings.findFirst({
-        where: eq(serverSettings.settingKey, "board"),
-      });
+      await mergeServerSettingByKeyAsync(ctx.db, "board", next, input);
 
-      if (existing) {
-        await updateServerSettingByKeyAsync(ctx.db, "board", next);
-      } else {
-        await insertServerSettingByKeyAsync(ctx.db, "board", next);
-      }
-
-      return next;
+      return await getServerSettingByKeyAsync(ctx.db, "board");
     }),
   saveSettings: permissionRequiredProcedure
     .requiresPermission("admin")
@@ -103,10 +96,11 @@ export const serverSettingsRouter = createTRPCRouter({
     )
     .mutation(async ({ ctx, input }) => {
       const current = await getServerSettingByKeyAsync(ctx.db, input.settingsKey);
-      await updateServerSettingByKeyAsync(ctx.db, input.settingsKey, {
+      const next = {
         ...current,
         ...input.value,
-      } as ServerSettings[keyof ServerSettings]);
+      } as ServerSettings[keyof ServerSettings];
+      await mergeServerSettingByKeyAsync(ctx.db, input.settingsKey, next, input.value);
     }),
   initSettings: onboardingProcedure
     .requiresStep("settings")

packages/api/src/router/test/board.spec.ts

@@ -4,7 +4,7 @@ import { describe, expect, it, test, vi } from "vitest";
 import type { Session } from "@homarr/auth";
 import { createId } from "@homarr/common";
 import type { Database, InferInsertModel } from "@homarr/db";
-import { and, eq } from "@homarr/db";
+import { and, eq, not } from "@homarr/db";
 import {
   boardGroupPermissions,
   boards,
@@ -516,6 +516,64 @@ describe("getHomeBoard should return home board", () => {
     });
     expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "view");
   });
+  test.each([
+    { deviceType: "mobile", expectedBoard: "mobile-home" },
+    { deviceType: "tablet", expectedBoard: "desktop-home" },
+  ] as const)(
+    "should use the $expectedBoard preference for a $deviceType device",
+    async ({ deviceType, expectedBoard }) => {
+      // Arrange
+      const db = createDb();
+      const caller = boardRouter.createCaller({ db, deviceType, session: defaultSession });
+
+      const mobileBoardProps = await createFullBoardAsync(db, "mobile-home");
+      const desktopBoardProps = await createFullBoardAsync(db, "desktop-home");
+      await db
+        .update(users)
+        .set({
+          homeBoardId: desktopBoardProps.boardId,
+          mobileHomeBoardId: mobileBoardProps.boardId,
+        })
+        .where(eq(users.id, defaultCreatorId));
+
+      // Act
+      const result = await caller.getHomeBoard();
+
+      // Assert
+      expectInputToBeFullBoardWithName(result, {
+        ...(expectedBoard === "mobile-home" ? mobileBoardProps : desktopBoardProps),
+        name: expectedBoard,
+      });
+    },
+  );
+  test("should return a mobile-only group home board", async () => {
+    // Arrange
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: "mobile", session: defaultSession });
+
+    const mobileBoardProps = await createFullBoardAsync(db, "group-mobile-home");
+    const groupId = createId();
+    await db.insert(groups).values({
+      id: groupId,
+      name: "mobile group",
+      position: 1,
+      homeBoardId: null,
+      mobileHomeBoardId: mobileBoardProps.boardId,
+    });
+    await db.insert(groupMembers).values({
+      userId: defaultCreatorId,
+      groupId,
+    });
+
+    // Act
+    const result = await caller.getHomeBoard();
+
+    // Assert
+    expectInputToBeFullBoardWithName(result, {
+      name: "group-mobile-home",
+      ...mobileBoardProps,
+    });
+  });
   test("should return global home board when user doesn't have one", async () => {
     // Arrange
     const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
@@ -1324,6 +1382,187 @@ describe("saveGroupBoardPermissions should save group board permissions", () =>
   );
 });
 
+const createExistingLayout = (id: string) => ({
+  id,
+  name: "Base",
+  columnCount: 10,
+  breakpoint: 0,
+});
+
+const createNewLayout = (columnCount: number) => ({
+  id: createId(),
+  name: "New layout",
+  columnCount,
+  breakpoint: 1400,
+});
+
+describe("saveLayouts should preserve legacy responsive layout editing", () => {
+  test("should add a layout and clone item and dynamic-section placements", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, layoutId, sectionId, itemId } = await createFullBoardAsync(db, "default");
+    const assignments = await createItemsAndSectionsAsync(db, {
+      boardId,
+      layoutId,
+      sectionId,
+    });
+    const newLayout = createNewLayout(3);
+
+    const savedLayouts = await caller.saveLayouts({
+      id: boardId,
+      layouts: [createExistingLayout(layoutId), newLayout],
+    });
+
+    const layout = expectToBeDefined(
+      await db.query.layouts.findFirst({
+        where: not(eq(layouts.id, layoutId)),
+      }),
+    );
+    expect(layout).toMatchObject({
+      name: newLayout.name,
+      columnCount: newLayout.columnCount,
+      breakpoint: newLayout.breakpoint,
+    });
+    expect(savedLayouts).toEqual([createExistingLayout(layoutId), { ...newLayout, id: layout.id }]);
+    await expectLayoutForRootLayoutAsync(db, sectionId, layout.id, {
+      ...assignments.inRoot,
+      a: itemId,
+    });
+    await expectLayoutForDynamicSectionAsync(db, assignments.inRoot.f, layout.id, assignments.inDynamicSection);
+
+    await caller.saveLayouts({ id: boardId, layouts: savedLayouts });
+    await expect(db.query.layouts.findMany({ where: eq(layouts.boardId, boardId) })).resolves.toHaveLength(2);
+  });
+
+  test("should update layout metadata and positions", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, layoutId, sectionId, itemId } = await createFullBoardAsync(db, "default");
+    const assignments = await createItemsAndSectionsAsync(db, {
+      boardId,
+      layoutId,
+      sectionId,
+    });
+
+    await caller.saveLayouts({
+      id: boardId,
+      layouts: [
+        {
+          id: layoutId,
+          name: "Phone",
+          columnCount: 3,
+          breakpoint: 480,
+        },
+      ],
+    });
+
+    await expect(db.query.layouts.findFirst({ where: eq(layouts.id, layoutId) })).resolves.toMatchObject({
+      name: "Phone",
+      columnCount: 3,
+      breakpoint: 480,
+    });
+    await expectLayoutForRootLayoutAsync(db, sectionId, layoutId, {
+      ...assignments.inRoot,
+      a: itemId,
+    });
+    await expectLayoutForDynamicSectionAsync(db, assignments.inRoot.f, layoutId, assignments.inDynamicSection);
+  });
+
+  test("should remove layouts omitted from the saved responsive configuration", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, layoutId } = await createFullBoardAsync(db, "default");
+
+    await caller.saveLayouts({
+      id: boardId,
+      layouts: [createNewLayout(12)],
+    });
+
+    await expect(db.query.layouts.findFirst({ where: eq(layouts.id, layoutId) })).resolves.toBeUndefined();
+  });
+
+  test("should reject duplicate responsive breakpoints", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, layoutId } = await createFullBoardAsync(db, "default");
+
+    await expect(
+      caller.saveLayouts({
+        id: boardId,
+        layouts: [
+          createExistingLayout(layoutId),
+          {
+            ...createNewLayout(4),
+            breakpoint: 0,
+          },
+        ],
+      }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+  });
+
+  test("should reject duplicate responsive layout IDs", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, layoutId } = await createFullBoardAsync(db, "default");
+    const existingLayout = createExistingLayout(layoutId);
+
+    await expect(
+      caller.saveLayouts({
+        id: boardId,
+        layouts: [existingLayout, { ...existingLayout, name: "Phone", breakpoint: 480 }],
+      }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+  });
+
+  test("should reject fractional responsive layout values", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, layoutId } = await createFullBoardAsync(db, "default");
+
+    await expect(
+      caller.saveLayouts({
+        id: boardId,
+        layouts: [{ ...createExistingLayout(layoutId), breakpoint: 480.5 }],
+      }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+
+    await expect(
+      caller.saveLayouts({
+        id: boardId,
+        layouts: [{ ...createExistingLayout(layoutId), columnCount: 3.5 }],
+      }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+  });
+});
+
+describe("addItem should preserve every saved layout", () => {
+  test("should clamp wide widgets to a retained narrow layout", async () => {
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
+    const { boardId, layoutId } = await createFullBoardAsync(db, "default");
+    const mobileLayoutId = createId();
+    await db.insert(layouts).values({
+      id: mobileLayoutId,
+      name: "Mobile",
+      columnCount: 1,
+      breakpoint: 480,
+      boardId,
+    });
+
+    const { itemId } = await caller.addItem({
+      boardId,
+      kind: "mediaMissing",
+    });
+
+    const savedItemLayouts = await db.query.itemLayouts.findMany({
+      where: eq(itemLayouts.itemId, itemId),
+    });
+    expect(savedItemLayouts).toHaveLength(2);
+    expect(savedItemLayouts).toContainEqual(expect.objectContaining({ layoutId, width: 4 }));
+    expect(savedItemLayouts).toContainEqual(expect.objectContaining({ layoutId: mobileLayoutId, width: 1 }));
+  });
+});
+
 describe("saveLayout should save the desktop layout", () => {
   test("should update position of items when column count changes", async () => {
     // Arrange
@@ -1349,7 +1588,7 @@ describe("saveLayout should save the desktop layout", () => {
     });
     await expectLayoutForDynamicSectionAsync(db, assignments.inRoot.f, layoutId, assignments.inDynamicSection);
   });
-  test("should keep the desktop layout and remove legacy responsive layouts", async () => {
+  test("should preserve legacy layouts and desktop metadata", async () => {
     // Arrange
     const db = createDb();
     const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
@@ -1376,15 +1615,18 @@ describe("saveLayout should save the desktop layout", () => {
     // Act
     await caller.saveLayout({
       id: boardId,
-      columnCount: 16,
+      columnCount: 14,
     });
 
     // Assert
     const savedLayouts = await db.query.layouts.findMany({ where: eq(layouts.boardId, boardId) });
-    expect(savedLayouts).toEqual([
-      expect.objectContaining({ id: desktopLayoutId, name: "Base", columnCount: 16, breakpoint: 0 }),
-    ]);
-    expect(savedLayouts.some((layout) => layout.id === layoutId)).toBe(false);
+    expect(savedLayouts).toHaveLength(2);
+    expect(savedLayouts).toContainEqual(
+      expect.objectContaining({ id: layoutId, name: "Base", columnCount: 10, breakpoint: 0 }),
+    );
+    expect(savedLayouts).toContainEqual(
+      expect.objectContaining({ id: desktopLayoutId, name: "Large", columnCount: 14, breakpoint: 1200 }),
+    );
   });
   test("should fail when board not found", async () => {
     // Arrange
@@ -1427,9 +1669,12 @@ const expectInputToBeFullBoardWithName = (
 };
 
 const createFullBoardAsync = async (db: Database, name: string) => {
-  await db.insert(users).values({
-    id: defaultCreatorId,
-  });
+  await db
+    .insert(users)
+    .values({
+      id: defaultCreatorId,
+    })
+    .onConflictDoNothing();
 
   const boardId = createId();
   await db.insert(boards).values({

packages/api/src/router/test/serverSettings.spec.ts

@@ -3,7 +3,7 @@ import { describe, expect, test, vi } from "vitest";
 
 import type { Session } from "@homarr/auth";
 import { createId } from "@homarr/common";
-import { boards, serverSettings } from "@homarr/db/schema";
+import { boards, layouts, serverSettings } from "@homarr/db/schema";
 import { createDb } from "@homarr/db/test";
 import { defaultServerSettings, defaultServerSettingsKeys } from "@homarr/server-settings";
 
@@ -56,6 +56,33 @@ describe("getAll server settings", () => {
 });
 
 describe("saveSettings", () => {
+  test("saveSettings should persist settings when defaults are not seeded", async () => {
+    const db = createDb();
+    const caller = serverSettingsRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session: defaultSession,
+    });
+
+    await caller.saveSettings({
+      settingsKey: "board",
+      value: {
+        enableAutomaticMobileLayout: false,
+      },
+    });
+
+    const dbSettings = await db.select().from(serverSettings);
+    expect(dbSettings).toStrictEqual([
+      {
+        settingKey: "board",
+        value: stringify({
+          ...defaultServerSettings.board,
+          enableAutomaticMobileLayout: false,
+        }),
+      },
+    ]);
+  });
+
   test("saveSettings should update settings and return true when it updated only one", async () => {
     const db = createDb();
     const caller = serverSettingsRouter.createCaller({
@@ -89,6 +116,33 @@ describe("saveSettings", () => {
       },
     ]);
   });
+
+  test("saveSettings should preserve concurrent partial updates", async () => {
+    const db = createDb();
+    const caller = serverSettingsRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session: defaultSession,
+    });
+
+    await Promise.all([
+      caller.saveSettings({
+        settingsKey: "analytics",
+        value: { enableGeneral: false },
+      }),
+      caller.saveSettings({
+        settingsKey: "analytics",
+        value: { instanceId: "concurrent-instance" },
+      }),
+    ]);
+
+    await expect(caller.getAll()).resolves.toMatchObject({
+      analytics: {
+        enableGeneral: false,
+        instanceId: "concurrent-instance",
+      },
+    });
+  });
 });
 
 describe("board settings API", () => {
@@ -103,6 +157,36 @@ describe("board settings API", () => {
     await expect(caller.getBoardSettings()).resolves.toStrictEqual(defaultServerSettings.board);
   });
 
+  test("getBoardSettings should backfill the automatic layout default for legacy values", async () => {
+    const db = createDb();
+    const caller = serverSettingsRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session: defaultSession,
+    });
+    const boardId = createId();
+    await db.insert(boards).values({ id: boardId, name: "legacy", isPublic: false });
+    await db.insert(layouts).values([
+      { id: createId(), boardId, name: "Base", columnCount: 12, breakpoint: 0 },
+      { id: createId(), boardId, name: "Mobile", columnCount: 4, breakpoint: 480 },
+    ]);
+    const legacyBoardSettings = {
+      homeBoardId: defaultServerSettings.board.homeBoardId,
+      mobileHomeBoardId: defaultServerSettings.board.mobileHomeBoardId,
+      enableStatusByDefault: defaultServerSettings.board.enableStatusByDefault,
+      forceDisableStatus: defaultServerSettings.board.forceDisableStatus,
+    };
+    await db.insert(serverSettings).values({
+      settingKey: "board",
+      value: stringify(legacyBoardSettings),
+    });
+
+    await expect(caller.getBoardSettings()).resolves.toStrictEqual({
+      ...defaultServerSettings.board,
+      enableAutomaticMobileLayout: false,
+    });
+  });
+
   test("updateBoardSettings should insert settings when defaults are not persisted", async () => {
     const db = createDb();
     const caller = serverSettingsRouter.createCaller({
@@ -145,6 +229,7 @@ describe("board settings API", () => {
     await caller.updateBoardSettings({ homeBoardId: boardId });
     const result = await caller.updateBoardSettings({
       mobileHomeBoardId: boardId,
+      enableAutomaticMobileLayout: false,
       enableStatusByDefault: false,
     });
 
@@ -152,6 +237,7 @@ describe("board settings API", () => {
       ...defaultServerSettings.board,
       homeBoardId: boardId,
       mobileHomeBoardId: boardId,
+      enableAutomaticMobileLayout: false,
       enableStatusByDefault: false,
     });
     const dbSettings = await db.select().from(serverSettings);
@@ -163,6 +249,25 @@ describe("board settings API", () => {
     ]);
   });
 
+  test("updateBoardSettings should preserve concurrent partial updates", async () => {
+    const db = createDb();
+    const caller = serverSettingsRouter.createCaller({
+      db,
+      deviceType: undefined,
+      session: defaultSession,
+    });
+
+    await Promise.all([
+      caller.updateBoardSettings({ forceDisableStatus: true }),
+      caller.updateBoardSettings({ enableStatusByDefault: false }),
+    ]);
+
+    await expect(caller.getBoardSettings()).resolves.toMatchObject({
+      forceDisableStatus: true,
+      enableStatusByDefault: false,
+    });
+  });
+
   test("updateBoardSettings should reject private home boards", async () => {
     const db = createDb();
     const caller = serverSettingsRouter.createCaller({

packages/api/src/test/mcp.spec.ts

@@ -33,6 +33,7 @@ test("MCP tools should contain expected procedures", () => {
   expect(toolNames).toContain("app_byId");
   expect(toolNames).toContain("app_create");
   expect(toolNames).toContain("board_savePartialBoardSettings");
+  expect(toolNames).toContain("board_saveLayout");
   expect(toolNames).toContain("board_duplicateBoard");
   expect(toolNames).toContain("info_getInfo");
   expect(toolNames).toContain("invite_getAll");