fix: keep mobile board widgets unchanged

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

@@ -1,19 +1,42 @@
 "use client";
 
-import { Button, Fieldset, Group, Input, Slider, Stack, Text } from "@mantine/core";
+import { Button, Fieldset, Grid, Group, Input, NumberInput, Slider, Stack, Text, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { getDesktopLayout } from "@homarr/boards/context";
+import { createId } from "@homarr/common";
 import { useZodForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import { boardSaveLayoutSchema } from "@homarr/validation/board";
+import { boardSaveLayoutSchema, boardSaveLayoutsSchema } from "@homarr/validation/board";
 
 import type { Board } from "../../_types";
 
 interface Props {
   board: Board;
+  enableAutomaticMobileLayout: boolean;
 }
-export const LayoutSettingsContent = ({ board }: Props) => {
+
+const getNextAvailableBreakpoint = (layouts: Array<{ breakpoint: number }>) => {
+  const breakpoints = new Set(layouts.map((layout) => layout.breakpoint));
+  const commonBreakpoints = [0, 480, 768, 1024, 1200, 1440, 1920];
+  const commonBreakpoint = commonBreakpoints.find((breakpoint) => !breakpoints.has(breakpoint));
+  if (commonBreakpoint !== undefined) return commonBreakpoint;
+
+  for (let breakpoint = 0; breakpoint <= 32767; breakpoint++) {
+    if (!breakpoints.has(breakpoint)) return breakpoint;
+  }
+
+  throw new Error("No responsive layout breakpoints are available");
+};
+
+export const LayoutSettingsContent = ({ board, enableAutomaticMobileLayout }: Props) =>
+  enableAutomaticMobileLayout ? (
+    <AutomaticLayoutSettingsContent board={board} />
+  ) : (
+    <ResponsiveLayoutSettingsContent board={board} />
+  );
+
+const AutomaticLayoutSettingsContent = ({ board }: Pick<Props, "board">) => {
   const t = useI18n();
   const utils = clientApi.useUtils();
   const desktopLayout = getDesktopLayout(board);
@@ -45,13 +68,20 @@ export const LayoutSettingsContent = ({ board }: Props) => {
               {t("board.setting.section.layout.desktop.description")}
             </Text>
             <Input.Wrapper label={t("layout.field.columnCount.label")}>
-              <Slider mt="xs" min={1} max={24} step={1} {...form.getInputProps("columnCount")} />
+              <Slider
+                mt="xs"
+                min={1}
+                max={24}
+                step={1}
+                thumbLabel={t("layout.field.columnCount.label")}
+                {...form.getInputProps("columnCount")}
+              />
             </Input.Wrapper>
           </Stack>
         </Fieldset>
 
         <Text c="dimmed" size="sm">
-          {t("board.setting.section.layout.mobile.description")}
+          {t("board.setting.section.layout.mobile.automaticDescription")}
         </Text>
 
         <Group justify="end">
@@ -63,3 +93,124 @@ export const LayoutSettingsContent = ({ board }: Props) => {
     </form>
   );
 };
+
+const ResponsiveLayoutSettingsContent = ({ board }: Pick<Props, "board">) => {
+  const t = useI18n();
+  const utils = clientApi.useUtils();
+  const form = useZodForm(boardSaveLayoutsSchema.omit({ id: true }).required(), {
+    initialValues: {
+      layouts: board.layouts,
+    },
+  });
+  const { mutate: saveLayouts, isPending } = clientApi.board.saveLayouts.useMutation({
+    onSuccess(layouts) {
+      const values = { layouts };
+      form.setValues(values);
+      form.resetDirty(values);
+    },
+    onSettled() {
+      void utils.board.getBoardByName.invalidate({ name: board.name });
+      void utils.board.getHomeBoard.invalidate();
+    },
+  });
+
+  return (
+    <form
+      onSubmit={form.onSubmit((values) => {
+        saveLayouts({
+          id: board.id,
+          ...values,
+        });
+      })}
+    >
+      <Stack>
+        <Text c="dimmed" size="sm">
+          {t("board.setting.section.layout.responsive.description")}
+        </Text>
+        <Stack gap="sm">
+          <Group justify="space-between" align="center">
+            <Text fw={500}>{t("board.setting.section.layout.responsive.title")}</Text>
+            <Button
+              variant="subtle"
+              onClick={() => {
+                form.setValues({
+                  layouts: [
+                    ...form.values.layouts,
+                    {
+                      id: createId(),
+                      name: t("board.setting.section.layout.responsive.defaultName"),
+                      columnCount: 10,
+                      breakpoint: getNextAvailableBreakpoint(form.values.layouts),
+                    },
+                  ],
+                });
+              }}
+            >
+              {t("board.setting.section.layout.responsive.action.add")}
+            </Button>
+          </Group>
+
+          {form.values.layouts.map((layout, index) => (
+            <Fieldset key={layout.id} legend={layout.name} bg="transparent">
+              <Grid>
+                <Grid.Col span={{ sm: 12, md: 6 }}>
+                  <TextInput {...form.getInputProps(`layouts.${index}.name`)} label={t("layout.field.name.label")} />
+                </Grid.Col>
+
+                <Grid.Col span={{ sm: 12, md: 6 }}>
+                  <Input.Wrapper label={t("layout.field.columnCount.label")}>
+                    <Slider
+                      mt="xs"
+                      min={1}
+                      max={24}
+                      step={1}
+                      thumbLabel={t("layout.field.columnCount.label")}
+                      {...form.getInputProps(`layouts.${index}.columnCount`)}
+                    />
+                  </Input.Wrapper>
+                </Grid.Col>
+
+                <Grid.Col span={{ sm: 12, md: 6 }}>
+                  <NumberInput
+                    {...form.getInputProps(`layouts.${index}.breakpoint`)}
+                    label={t("layout.field.breakpoint.label")}
+                    description={t("layout.field.breakpoint.description")}
+                    min={0}
+                    max={32767}
+                    allowDecimal={false}
+                    allowNegative={false}
+                  />
+                </Grid.Col>
+              </Grid>
+              {form.values.layouts.length >= 2 && (
+                <Group justify="end">
+                  <Button
+                    variant="subtle"
+                    onClick={() => {
+                      form.setValues((previous) => {
+                        const previousLayouts = previous.layouts ?? [];
+                        return previousLayouts.length >= 2
+                          ? {
+                              layouts: previousLayouts.filter((filteredLayout) => filteredLayout.id !== layout.id),
+                            }
+                          : previous;
+                      });
+                    }}
+                  >
+                    {t("common.action.remove")}
+                  </Button>
+                </Group>
+              )}
+            </Fieldset>
+          ))}
+        </Stack>
+
+        <Group justify="end">
+          <Button type="submit" loading={isPending}>
+            {t("common.action.saveChanges")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};

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

@@ -90,7 +90,10 @@ export default async function BoardSettingsPage(props: Props) {
             <GeneralSettingsContent board={board} />
           </AccordionItemFor>
           <AccordionItemFor value="layout" icon={IconLayout}>
-            <LayoutSettingsContent board={board} />
+            <LayoutSettingsContent
+              board={board}
+              enableAutomaticMobileLayout={boardSettings.enableAutomaticMobileLayout}
+            />
           </AccordionItemFor>
           <AccordionItemFor value="background" icon={IconPhoto}>
             <BackgroundSettingsContent board={board} />

apps/nextjs/src/app/[locale]/layout.tsx

@@ -107,6 +107,7 @@ export default async function Layout(props: {
           board: {
             homeBoardId: serverSettings.board.homeBoardId,
             mobileHomeBoardId: serverSettings.board.mobileHomeBoardId,
+            enableAutomaticMobileLayout: serverSettings.board.enableAutomaticMobileLayout,
             enableStatusByDefault: serverSettings.board.enableStatusByDefault,
             forceDisableStatus: serverSettings.board.forceDisableStatus,
           },

apps/nextjs/src/app/[locale]/manage/settings/_components/board-settings-form.tsx

@@ -33,6 +33,13 @@ export const BoardSettingsForm = ({ defaultValues }: { defaultValues: ServerSett
             {...form.getInputProps("mobileHomeBoardId")}
           />
 
+          <Text fw={500}>{tBoard("mobileLayout.title")}</Text>
+          <Switch
+            {...form.getInputProps("enableAutomaticMobileLayout", { type: "checkbox" })}
+            label={tBoard("mobileLayout.enable.label")}
+            description={tBoard("mobileLayout.enable.description")}
+          />
+
           <Text fw={500}>{tBoard("status.title")}</Text>
           <Switch
             {...form.getInputProps("enableStatusByDefault", { type: "checkbox" })}

apps/nextjs/src/app/[locale]/manage/settings/_components/common-form.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button, Group, Stack } from "@mantine/core";
+import { useRouter } from "next/navigation";
 
 import { clientApi } from "@homarr/api/client";
 import { useForm } from "@homarr/form";
@@ -17,6 +18,7 @@ export const CommonSettingsForm = <TKey extends keyof ServerSettings>({
   defaultValues: ServerSettings[TKey];
   children: (form: ReturnType<typeof useForm<ServerSettings[TKey]>>) => React.ReactNode;
 }) => {
+  const router = useRouter();
   const t = useI18n();
   const tSettings = useScopedI18n("management.page.settings");
   const { mutateAsync, isPending } = clientApi.serverSettings.saveSettings.useMutation({
@@ -24,6 +26,7 @@ export const CommonSettingsForm = <TKey extends keyof ServerSettings>({
       showSuccessNotification({
         message: tSettings("notification.success.message"),
       });
+      router.refresh();
     },
     onError() {
       showErrorNotification({

apps/nextjs/src/components/board/items/actions/create-item.ts

@@ -60,9 +60,15 @@ const createItemLayouts = (board: Board, currentSection: EmptySection, kind: Wid
   return layouts.map((layoutId) => {
     const boardLayout = board.layouts.find((layout) => layout.id === layoutId);
     const elements = getSectionElements(board, { sectionId: currentSection.id, layoutId });
+    const layoutItemSize = boardLayout
+      ? {
+          ...itemSize,
+          width: Math.min(itemSize.width, boardLayout.columnCount),
+        }
+      : itemSize;
 
     const emptyPosition = boardLayout
-      ? getFirstEmptyPosition(elements, boardLayout.columnCount, 9999, itemSize)
+      ? getFirstEmptyPosition(elements, boardLayout.columnCount, 9999, layoutItemSize)
       : { xOffset: 0, yOffset: 0 };
 
     if (!emptyPosition) {
@@ -70,8 +76,8 @@ const createItemLayouts = (board: Board, currentSection: EmptySection, kind: Wid
     }
 
     return {
-      width: itemSize.width,
-      height: itemSize.height,
+      width: layoutItemSize.width,
+      height: layoutItemSize.height,
       ...emptyPosition,
       sectionId: currentSection.id,
       layoutId,

apps/nextjs/src/components/board/items/actions/empty-position.ts

@@ -7,7 +7,7 @@ export const getFirstEmptyPosition = (
   size: { width: number; height: number } = { width: 1, height: 1 },
 ) => {
   for (let yOffset = 0; yOffset < rowCount + 1 - size.height; yOffset++) {
-    for (let xOffset = 0; xOffset < columnCount; xOffset++) {
+    for (let xOffset = 0; xOffset < columnCount + 1 - size.width; xOffset++) {
       const isOccupied = elements.some(
         (element) =>
           element.yOffset < yOffset + size.height &&

apps/nextjs/src/components/board/items/actions/move-and-resize-item.ts

@@ -1,9 +1,8 @@
-import { getCurrentLayout } from "@homarr/boards/context";
-
 import type { Board } from "~/app/[locale]/boards/_types";
 
 export interface MoveAndResizeItemInput {
   itemId: string;
+  layoutId: string;
   xOffset: number;
   yOffset: number;
   width: number;
@@ -11,10 +10,8 @@ export interface MoveAndResizeItemInput {
 }
 
 export const moveAndResizeItemCallback =
-  ({ itemId, ...layoutInput }: MoveAndResizeItemInput) =>
+  ({ itemId, layoutId, ...layoutInput }: MoveAndResizeItemInput) =>
   (previous: Board): Board => {
-    const currentLayout = getCurrentLayout(previous);
-
     return {
       ...previous,
       items: previous.items.map((item) =>
@@ -23,7 +20,7 @@ export const moveAndResizeItemCallback =
           : {
               ...item,
               layouts: item.layouts.map((layout) =>
-                layout.layoutId !== currentLayout
+                layout.layoutId !== layoutId
                   ? layout
                   : {
                       ...layout,

apps/nextjs/src/components/board/items/actions/move-item-to-section.ts

@@ -1,9 +1,8 @@
-import { getCurrentLayout } from "@homarr/boards/context";
-
 import type { Board } from "~/app/[locale]/boards/_types";
 
 export interface MoveItemToSectionInput {
   itemId: string;
+  layoutId: string;
   sectionId: string;
   xOffset: number;
   yOffset: number;
@@ -12,10 +11,8 @@ export interface MoveItemToSectionInput {
 }
 
 export const moveItemToSectionCallback =
-  ({ itemId, ...layoutInput }: MoveItemToSectionInput) =>
+  ({ itemId, layoutId, ...layoutInput }: MoveItemToSectionInput) =>
   (board: Board): Board => {
-    const currentLayout = getCurrentLayout(board);
-
     return {
       ...board,
       items: board.items.map((item) =>
@@ -24,7 +21,7 @@ export const moveItemToSectionCallback =
           : {
               ...item,
               layouts: item.layouts.map((layout) =>
-                layout.layoutId !== currentLayout
+                layout.layoutId !== layoutId
                   ? layout
                   : {
                       ...layout,

apps/nextjs/src/components/board/items/actions/test/create-item.spec.ts

@@ -1,4 +1,4 @@
-import { describe, expect, test, vi } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 
 import * as boardContext from "@homarr/boards/context";
 
@@ -10,6 +10,10 @@ import { ItemMockBuilder } from "./mocks/item-mock";
 import { LayoutMockBuilder } from "./mocks/layout-mock";
 
 describe("item actions create-item", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   test("should add it to first section", () => {
     // Arrange
     const itemKind = "clock";
@@ -108,4 +112,24 @@ describe("item actions create-item", () => {
       { height: 1, width: 1 },
     );
   });
+
+  test("clamps wide widgets to each retained layout", () => {
+    const desktopLayout = new LayoutMockBuilder({ id: "desktop", columnCount: 12 }).build();
+    const mobileLayout = new LayoutMockBuilder({ id: "mobile", columnCount: 1 }).build();
+    const board = new BoardMockBuilder()
+      .addLayout(desktopLayout)
+      .addLayout(mobileLayout)
+      .addEmptySection({ id: "root", yOffset: 0 })
+      .build();
+
+    const result = createItemCallback({ kind: "mediaMissing" })(board);
+    const item = result.items.at(0);
+
+    expect(item?.layouts).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ layoutId: desktopLayout.id, width: 4 }),
+        expect.objectContaining({ layoutId: mobileLayout.id, width: 1 }),
+      ]),
+    );
+  });
 });

apps/nextjs/src/components/board/items/actions/test/empty-position.spec.ts

@@ -106,6 +106,10 @@ describe("get first empty position", () => {
 
     expect(result).toEqual(expectedX !== undefined ? { xOffset: expectedX, yOffset: expectedY } : undefined);
   });
+
+  test("does not place an item wider than the layout", () => {
+    expect(getFirstEmptyPosition([], 1, undefined, { width: 2, height: 1 })).toBeUndefined();
+  });
 });
 
 const createElementsFromLayout = (layout: string[][]) => {

apps/nextjs/src/components/board/items/actions/test/move-and-resize-item.spec.ts

@@ -1,6 +1,4 @@
-import { describe, expect, test, vi } from "vitest";
-
-import * as boardContext from "@homarr/boards/context";
+import { describe, expect, test } from "vitest";
 
 import { moveAndResizeItemCallback } from "../move-and-resize-item";
 import { BoardMockBuilder } from "./mocks/board-mock";
@@ -11,8 +9,6 @@ describe("moveItemToSectionCallback should move item in section", () => {
     // Arrange
     const itemToMove = "2";
     const layoutId = "1";
-    const spy = vi.spyOn(boardContext, "getCurrentLayout");
-    spy.mockReturnValue(layoutId);
     const newPosition = {
       xOffset: 20,
       yOffset: 30,
@@ -25,7 +21,7 @@ describe("moveItemToSectionCallback should move item in section", () => {
     const board = new BoardMockBuilder().addItem(itemA).addItem(itemB).addItem(itemC).build();
 
     // Act
-    const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, ...newPosition })(board);
+    const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, layoutId, ...newPosition })(board);
 
     // Assert
     expect(updatedBoard.items).toHaveLength(3);
@@ -43,8 +39,6 @@ describe("moveItemToSectionCallback should move item in section", () => {
     // Arrange
     const itemToMove = "2";
     const layoutId = "1";
-    const spy = vi.spyOn(boardContext, "getCurrentLayout");
-    spy.mockReturnValue(layoutId);
     const newPosition = {
       xOffset: 20,
       yOffset: 30,
@@ -56,7 +50,7 @@ describe("moveItemToSectionCallback should move item in section", () => {
     const board = new BoardMockBuilder().addItem(itemA).addItem(itemC).build();
 
     // Act
-    const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, ...newPosition })(board);
+    const updatedBoard = moveAndResizeItemCallback({ itemId: itemToMove, layoutId, ...newPosition })(board);
 
     // Assert
     expect(updatedBoard.items).toHaveLength(2);

apps/nextjs/src/components/board/items/actions/test/move-item-to-section.spec.ts

@@ -1,6 +1,4 @@
-import { describe, expect, test, vi } from "vitest";
-
-import * as boardContext from "@homarr/boards/context";
+import { describe, expect, test } from "vitest";
 
 import { moveItemToSectionCallback } from "../move-item-to-section";
 import { BoardMockBuilder } from "./mocks/board-mock";
@@ -11,8 +9,6 @@ describe("moveItemToSectionCallback should move item to section", () => {
     // Arrange
     const itemToMove = "2";
     const layoutId = "1";
-    const spy = vi.spyOn(boardContext, "getCurrentLayout");
-    spy.mockReturnValue(layoutId);
     const newPosition = {
       sectionId: "3",
       xOffset: 20,
@@ -26,7 +22,7 @@ describe("moveItemToSectionCallback should move item to section", () => {
     const board = new BoardMockBuilder().addItem(itemA).addItem(itemB).addItem(itemC).build();
 
     // Act
-    const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, ...newPosition })(board);
+    const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, layoutId, ...newPosition })(board);
 
     // Assert
     expect(updatedBoard.items).toHaveLength(3);
@@ -44,8 +40,6 @@ describe("moveItemToSectionCallback should move item to section", () => {
     // Arrange
     const itemToMove = "2";
     const layoutId = "1";
-    const spy = vi.spyOn(boardContext, "getCurrentLayout");
-    spy.mockReturnValue(layoutId);
     const newPosition = {
       sectionId: "3",
       xOffset: 20,
@@ -58,7 +52,7 @@ describe("moveItemToSectionCallback should move item to section", () => {
     const board = new BoardMockBuilder().addItem(itemA).addItem(itemC).build();
 
     // Act
-    const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, ...newPosition })(board);
+    const updatedBoard = moveItemToSectionCallback({ itemId: itemToMove, layoutId, ...newPosition })(board);
 
     // Assert
     expect(updatedBoard.items).toHaveLength(2);

apps/nextjs/src/components/board/mobile/mobile-board.module.css

@@ -16,5 +16,4 @@
 .item > :global(.grid-stack-item-content) {
   width: 100%;
   height: 100%;
-  overflow-y: auto;
 }

apps/nextjs/src/components/board/mobile/mobile-layout.spec.ts

@@ -93,4 +93,25 @@ describe("createMobileBoardItems", () => {
     expect(result.map((item) => item.id)).toEqual(["second", "first"]);
     expect(result[1]).toMatchObject({ width: 1, height: 1 });
   });
+
+  test("keeps useful desktop footprints within the two-by-three mobile limit", () => {
+    const board = new BoardMockBuilder().build();
+    const desktopLayoutId = board.layouts.at(0)?.id;
+    if (!desktopLayoutId) throw new Error("Expected a desktop layout");
+    const rootSection = new EmptySectionMockBuilder({ id: "root" }).build();
+    board.sections.push(rootSection);
+    board.items.push(
+      new ItemMockBuilder({ id: "two-by-two" })
+        .addLayout({ layoutId: desktopLayoutId, sectionId: rootSection.id, width: 2, height: 2 })
+        .build(),
+      new ItemMockBuilder({ id: "one-by-one" })
+        .addLayout({ layoutId: desktopLayoutId, sectionId: rootSection.id, xOffset: 2, width: 1, height: 1 })
+        .build(),
+    );
+
+    expect(createMobileBoardItems(board, desktopLayoutId)).toMatchObject([
+      { id: "two-by-two", width: 2, height: 2 },
+      { id: "one-by-one", width: 1, height: 1 },
+    ]);
+  });
 });

apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 
 import { fetchApi } from "@homarr/api/client";
-import { getCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { createId } from "@homarr/common";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useSettings } from "@homarr/settings";
@@ -18,6 +18,7 @@ export const useCategoryMenuActions = (category: CategorySection) => {
   const { addCategory, moveCategory, removeCategory, renameCategory } = useCategoryActions();
   const t = useI18n();
   const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
 
   const createCategoryAtYOffset = useCallback(
     (position: number) => {
@@ -104,7 +105,6 @@ export const useCategoryMenuActions = (category: CategorySection) => {
 
   const settings = useSettings();
   const openAllInNewTabs = useCallback(async () => {
-    const currentLayoutId = getCurrentLayout(board);
     const appIds = filterByItemKind(
       board.items.filter(
         (item) => item.layouts.find((layout) => layout.layoutId === currentLayoutId)?.sectionId === category.id,
@@ -130,7 +130,7 @@ export const useCategoryMenuActions = (category: CategorySection) => {
       });
       break;
     }
-  }, [category, board, t, openConfirmModal, settings]);
+  }, [category, board, currentLayoutId, t, openConfirmModal, settings]);
 
   return {
     addCategoryAbove,

apps/nextjs/src/components/board/sections/dynamic-section.tsx

@@ -1,7 +1,7 @@
 import { Badge, Box, Card } from "@mantine/core";
 import combineClasses from "clsx";
 
-import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { useRequiredBoard } from "@homarr/boards/context";
 
 import type { DynamicSectionItem } from "~/app/[locale]/boards/_types";
 import { BoardDynamicSectionMenu } from "./dynamic/dynamic-menu";
@@ -14,7 +14,6 @@ interface Props {
 
 export const BoardDynamicSection = ({ section }: Props) => {
   const board = useRequiredBoard();
-  const currentLayoutId = useCurrentLayout();
   const options = section.options;
 
   return (
@@ -52,8 +51,7 @@ export const BoardDynamicSection = ({ section }: Props) => {
             {options.title}
           </Badge>
         )}
-        {/* Use unique key by layout to reinitialize gridstack */}
-        <GridStack key={`${currentLayoutId}-${section.id}`} section={section} className="min-row" />
+        <GridStack section={section} className="min-row" />
       </Card>
       <BoardDynamicSectionMenu section={section} />
     </Box>

apps/nextjs/src/components/board/sections/gridstack/gridstack.tsx

@@ -4,6 +4,8 @@ import type { BoxProps } from "@mantine/core";
 import { Box } from "@mantine/core";
 import combineClasses from "clsx";
 
+import { useCurrentLayout } from "@homarr/boards/context";
+
 import type { DynamicSectionItem, Section } from "~/app/[locale]/boards/_types";
 import { SectionContent } from "../content";
 import { SectionProvider } from "../section-context";
@@ -15,6 +17,12 @@ interface Props extends BoxProps {
 }
 
 export const GridStack = ({ section, ...props }: Props) => {
+  const currentLayoutId = useCurrentLayout();
+
+  return <GridStackForLayout key={currentLayoutId} section={section} {...props} />;
+};
+
+const GridStackForLayout = ({ section, ...props }: Props) => {
   const { items, innerSections } = useSectionItems(section.id);
   const itemIds = [...items, ...innerSections].map((item) => item.id);
 

apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts

@@ -103,6 +103,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
         // Updates the react-query state
         moveAndResizeItem({
           itemId: id,
+          layoutId: currentLayoutId,
           // We want the following properties to be null by default
           // so the next free position is used from the gridstack
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -120,6 +121,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
       if (type === "section") {
         moveAndResizeInnerSection({
           innerSectionId: id,
+          layoutId: currentLayoutId,
           // We want the following properties to be null by default
           // so the next free position is used from the gridstack
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -136,7 +138,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
 
       console.error(`Unknown grid-stack-item type to move. type='${type}' id='${id}'`);
     },
-    [moveAndResizeItem, moveAndResizeInnerSection],
+    [currentLayoutId, moveAndResizeItem, moveAndResizeInnerSection],
   );
   const onAdd = useCallback(
     (addedNode: GridStackNode) => {
@@ -149,6 +151,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
         // Updates the react-query state
         moveItemToSection({
           itemId: id,
+          layoutId: currentLayoutId,
           sectionId: section.id,
           // We want the following properties to be null by default
           // so the next free position is used from the gridstack
@@ -167,6 +170,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
       if (type === "section") {
         moveInnerSectionToSection({
           innerSectionId: id,
+          layoutId: currentLayoutId,
           sectionId: section.id,
           // We want the following properties to be null by default
           // so the next free position is used from the gridstack
@@ -184,7 +188,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
 
       console.error(`Unknown grid-stack-item type to add. type='${type}' id='${id}'`);
     },
-    [moveItemToSection, moveInnerSectionToSection, section.id],
+    [currentLayoutId, moveItemToSection, moveInnerSectionToSection, section.id],
   );
 
   // initialize the gridstack

apps/nextjs/src/components/board/sections/section-actions.tsx

@@ -1,10 +1,10 @@
 import { useCallback } from "react";
 
-import { getCurrentLayout } from "@homarr/boards/context";
 import { useUpdateBoard } from "@homarr/boards/updater";
 
 interface MoveAndResizeInnerSection {
   innerSectionId: string;
+  layoutId: string;
   xOffset: number;
   yOffset: number;
   width: number;
@@ -12,6 +12,7 @@ interface MoveAndResizeInnerSection {
 }
 interface MoveInnerSectionToSection {
   innerSectionId: string;
+  layoutId: string;
   sectionId: string;
   xOffset: number;
   yOffset: number;
@@ -23,7 +24,7 @@ export const useSectionActions = () => {
   const { updateBoard } = useUpdateBoard();
 
   const moveAndResizeInnerSection = useCallback(
-    ({ innerSectionId, ...positionProps }: MoveAndResizeInnerSection) => {
+    ({ innerSectionId, layoutId, ...positionProps }: MoveAndResizeInnerSection) => {
       updateBoard((previous) => ({
         ...previous,
         sections: previous.sections.map((section) => {
@@ -31,12 +32,10 @@ export const useSectionActions = () => {
           if (section.id !== innerSectionId) return section;
           if (section.kind !== "dynamic") return section;
 
-          const currentLayout = getCurrentLayout(previous);
-
           return {
             ...section,
             layouts: section.layouts.map((layout) => {
-              if (layout.layoutId !== currentLayout) return layout;
+              if (layout.layoutId !== layoutId) return layout;
               return {
                 ...layout,
                 ...positionProps,
@@ -50,7 +49,7 @@ export const useSectionActions = () => {
   );
 
   const moveInnerSectionToSection = useCallback(
-    ({ innerSectionId, sectionId, ...positionProps }: MoveInnerSectionToSection) => {
+    ({ innerSectionId, layoutId, sectionId, ...positionProps }: MoveInnerSectionToSection) => {
       updateBoard((previous) => {
         return {
           ...previous,
@@ -59,12 +58,10 @@ export const useSectionActions = () => {
             if (section.id !== innerSectionId) return section;
             if (section.kind !== "dynamic") return section;
 
-            const currentLayout = getCurrentLayout(previous);
-
             return {
               ...section,
               layouts: section.layouts.map((layout) => {
-                if (layout.layoutId !== currentLayout) return layout;
+                if (layout.layoutId !== layoutId) return layout;
                 return {
                   ...layout,
                   ...positionProps,

apps/nextjs/src/components/board/use-mobile-board.tsx

@@ -4,6 +4,8 @@ import type { PropsWithChildren } from "react";
 import { createContext, useContext } from "react";
 import { useMediaQuery } from "@mantine/hooks";
 
+import { useSettings } from "@homarr/settings";
+
 export const mobileBoardMediaQuery = "(max-width: 48em)";
 
 const InitialMobileBoardContext = createContext<boolean | undefined>(undefined);
@@ -17,5 +19,8 @@ export const MobileBoardViewportProvider = ({
 
 export const useIsMobileBoard = () => {
   const initialIsMobile = useContext(InitialMobileBoardContext);
-  return useMediaQuery(mobileBoardMediaQuery, initialIsMobile, { getInitialValueInEffect: true });
+  const { enableAutomaticMobileLayout } = useSettings();
+  const isMobileViewport = useMediaQuery(mobileBoardMediaQuery, initialIsMobile, { getInitialValueInEffect: true });
+
+  return enableAutomaticMobileLayout && isMobileViewport;
 };