From dbc24e909142bdabd634e5b108afa816ce902a78 Mon Sep 17 00:00:00 2001 From: ajnart Date: Wed, 9 Sep 2026 15:33:14 +0200 Subject: [PATCH] fix: use a compact 40 to 200 pixel tile range --- apps/docs/docs/management/api/index.mdx | 2 +- apps/docs/docs/management/boards/index.mdx | 2 +- apps/docs/static/api/open-api-schema.json | 4 ++-- .../[locale]/boards/[name]/settings/_settings-form.tsx | 4 ++-- .../assistant/assistant-board-settings-tool.tsx | 3 +-- .../board/layout/test/scaled-board-canvas.spec.ts | 8 ++++---- packages/definitions/src/board.ts | 4 ++-- 7 files changed, 13 insertions(+), 14 deletions(-) diff --git a/apps/docs/docs/management/api/index.mdx b/apps/docs/docs/management/api/index.mdx index 742e8b54d..be6ecd2f7 100644 --- a/apps/docs/docs/management/api/index.mdx +++ b/apps/docs/docs/management/api/index.mdx @@ -63,7 +63,7 @@ layouts can use any other breakpoint, and Homarr selects the highest breakpoint roles and use the canonical layouts returned by save operations, including generated IDs. Board settings expose `fixedScaling` and `fixedItemSize`. The default fitted mode uses `fixedScaling: false`; setting it -to `true` keeps each `1 × 1` tile at `fixedItemSize` pixels, which must be an integer from `100` through `400`. The +to `true` keeps each `1 × 1` tile at `fixedItemSize` pixels, which must be an integer from `40` through `200`. The configured size is retained while fixed scaling is disabled. Layout `columnCount` remains the maximum total column count, including fixed sidebars. diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx index 18df5180c..b579f1770 100644 --- a/apps/docs/docs/management/boards/index.mdx +++ b/apps/docs/docs/management/boards/index.mdx @@ -75,7 +75,7 @@ draft; **Discard** restores the saved settings. ### Try a layout before saving -Choose **Fixed scaling** or **Fit to screen** under **Tile sizing**. Fixed sizing accepts **100–400 px**; its square +Choose **Fixed scaling** or **Fit to screen** under **Tile sizing**. Fixed sizing accepts **40–200 px**; its square sample is shown at half size with the configured dimensions underneath. The size is retained when you switch modes. Select a layout to edit its columns, breakpoint, and side rails beside the compact **Board preview**. It uses the diff --git a/apps/docs/static/api/open-api-schema.json b/apps/docs/static/api/open-api-schema.json index 45d0f5815..c69b13cb7 100644 --- a/apps/docs/static/api/open-api-schema.json +++ b/apps/docs/static/api/open-api-schema.json @@ -2156,8 +2156,8 @@ }, "fixedItemSize": { "type": "integer", - "minimum": 100, - "maximum": 400 + "minimum": 40, + "maximum": 200 }, "disableStatus": { "type": "boolean" diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_settings-form.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_settings-form.tsx index 403777b5e..c5a3fcf42 100644 --- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_settings-form.tsx +++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_settings-form.tsx @@ -10,7 +10,7 @@ import { clientApi } from "@homarr/api/client"; import { useUpdateBoard } from "@homarr/boards/updater"; import { revalidatePathActionAsync } from "@homarr/common/client"; import { env } from "@homarr/common/env"; -import { BOARD_FIXED_ITEM_SIZE_DEFAULT } from "@homarr/definitions"; +import { normalizeFixedItemSize } from "~/components/board/layout/scaling"; import { useZodForm } from "@homarr/form"; import { showErrorNotification, showSuccessNotification } from "@homarr/notifications"; import { useSettings } from "@homarr/settings"; @@ -83,7 +83,7 @@ const buildInitialValues = (board: Board): FormValues => ({ customCss: board.customCss ?? "", disableStatus: board.disableStatus, fixedScaling: board.fixedScaling ?? false, - fixedItemSize: board.fixedItemSize ?? BOARD_FIXED_ITEM_SIZE_DEFAULT, + fixedItemSize: normalizeFixedItemSize(board.fixedItemSize ?? ""), layouts: normalizeMobileLayoutGutters(board.layouts), }); diff --git a/apps/nextjs/src/components/assistant/assistant-board-settings-tool.tsx b/apps/nextjs/src/components/assistant/assistant-board-settings-tool.tsx index 4c6a50522..d9277c6cf 100644 --- a/apps/nextjs/src/components/assistant/assistant-board-settings-tool.tsx +++ b/apps/nextjs/src/components/assistant/assistant-board-settings-tool.tsx @@ -41,7 +41,6 @@ import type { z } from "zod/v4"; import type { RouterOutputs } from "@homarr/api"; import { clientApi } from "@homarr/api/client"; import { - BOARD_FIXED_ITEM_SIZE_DEFAULT, BOARD_FIXED_ITEM_SIZE_MAX, BOARD_FIXED_ITEM_SIZE_MIN, backgroundImageAttachments, @@ -96,7 +95,7 @@ const normalizeFormValues = ( itemRadius: values.itemRadius, disableStatus: values.disableStatus, fixedScaling: values.fixedScaling ?? false, - fixedItemSize: values.fixedItemSize ?? BOARD_FIXED_ITEM_SIZE_DEFAULT, + fixedItemSize: normalizeFixedItemSize(values.fixedItemSize ?? ""), }; }; diff --git a/apps/nextjs/src/components/board/layout/test/scaled-board-canvas.spec.ts b/apps/nextjs/src/components/board/layout/test/scaled-board-canvas.spec.ts index f5a66e5cb..6fac028a3 100644 --- a/apps/nextjs/src/components/board/layout/test/scaled-board-canvas.spec.ts +++ b/apps/nextjs/src/components/board/layout/test/scaled-board-canvas.spec.ts @@ -14,7 +14,7 @@ import { } from "../scaling"; describe("board canvas scale policy", () => { - test.each([100, 150, 200, 400])("renders an exact %s CSS-pixel fixed tile", (itemSize) => { + test.each([40, 80, 100, 200])("renders an exact %s CSS-pixel fixed tile", (itemSize) => { const scale = calculateFixedBoardCanvasScale(itemSize); expect(LOGICAL_GRID_PITCH * scale - 2 * BOARD_GRID_ITEM_INSET).toBeCloseTo(itemSize); }); @@ -27,9 +27,9 @@ describe("board canvas scale policy", () => { ); test("clamps and rounds the configured fixed size", () => { - expect(normalizeFixedItemSize(20)).toBe(100); - expect(normalizeFixedItemSize(700)).toBe(400); - expect(normalizeFixedItemSize(200.7)).toBe(201); + expect(normalizeFixedItemSize(20)).toBe(40); + expect(normalizeFixedItemSize(400)).toBe(200); + expect(normalizeFixedItemSize(100.7)).toBe(101); }); test.each([0.75, 1, 1.25, 1.5, 2])("preserves fixed CSS dimensions at browser zoom %s", (zoom) => { diff --git a/packages/definitions/src/board.ts b/packages/definitions/src/board.ts index 79a56133b..38200fde3 100644 --- a/packages/definitions/src/board.ts +++ b/packages/definitions/src/board.ts @@ -11,8 +11,8 @@ export const backgroundImageSizes = createDefinition(["cover", "contain"], { export const layoutRoles = createDefinition(["mobile", "base", "custom"], { defaultValue: "custom" }); export const BOARD_FIXED_ITEM_SIZE_DEFAULT = 200; -export const BOARD_FIXED_ITEM_SIZE_MIN = 100; -export const BOARD_FIXED_ITEM_SIZE_MAX = 400; +export const BOARD_FIXED_ITEM_SIZE_MIN = 40; +export const BOARD_FIXED_ITEM_SIZE_MAX = 200; export type BackgroundImageAttachment = inferDefinitionType; export type BackgroundImageRepeat = inferDefinitionType;