fix: remove stale weather descriptions

apps/docs/docs/getting-started/after-the-installation.mdx

@@ -198,13 +198,9 @@ In the modal you can edit the app that you want to display:
 
 <figure>
   <img src={editItemCurrent} alt="Current Edit item modal for an App tile" style={{ maxWidth: "620px" }} />
-  <figcaption>
-    The Edit item workspace previews option changes as you configure the tile. Save changes to apply them to the board.
-  </figcaption>
+  <figcaption>Use the Edit item modal to choose the app and configure how its tile is displayed.</figcaption>
 </figure>
 
-When adding a widget, set its initial grid width and height directly in the preview. These size controls are only shown before the widget is added.
-
 As soon as you save your changes, the tile on the board will refresh and display your app.
 Resize from any visible edge or corner handle. For a Container, activate its top-left grip before using its resize handles.
 Press and hold a handle, move the pointer, and release it when the tile has the size you want.

apps/docs/docs/management/boards/index.mdx

@@ -27,10 +27,9 @@ opening it. Containers include their visible widgets and app icons instead of ap
 
 Names of boards must be unique because this will be used in the URL to load the desired board.
 
-Press `Shift+C`, or select **Switch board** from the user menu, to open the board switcher. It shows structural
-previews of every board you can access, with your current board at the end. Home-board markers and creator avatars
-match the board management view. Use the search field at the top, or simply start typing, to filter by name. Use the
-arrow keys to move through the results and press `Enter` to open the selected board.
+Press `Shift+C`, or select **Switch board** from the user menu, to open the board switcher. It shows
+structural previews of the other boards you can access. Start typing to filter by name, use the arrow keys to move
+through the results, and press `Enter` to open the selected board.
 
 ## Create a new board
 

apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx

@@ -16,7 +16,7 @@ import { BoardSetupChecklist } from "~/components/board/board-setup-checklist";
 import {
   getBoardLaneColumnCount,
   getInitialBoardLogicalHeight,
-  getLogicalGridSize,
+  getLogicalTrackSize,
   LOGICAL_GRID_GAP,
   getRootSectionForLane,
 } from "~/components/board/layout";
@@ -61,16 +61,16 @@ export const ClientBoard = () => {
   const rightColumnCount = getBoardLaneColumnCount(currentLayout, "right");
   const laneWidths = [leftColumnCount, mainColumnCount, rightColumnCount]
     .filter((columnCount) => columnCount > 0)
-    .map(getLogicalGridSize);
+    .map(getLogicalTrackSize);
   const logicalWidth =
     laneWidths.reduce((total, width) => total + width, 0) + (laneWidths.length - 1) * LOGICAL_GRID_GAP;
   const initialLogicalHeight = getInitialBoardLogicalHeight(board, currentLayoutId);
   const representativeWidth = layoutOverrideId ? getRepresentativeLayoutWidth(currentLayout, board.layouts) : null;
   const initialAvailableWidth = Math.max(1, (representativeWidth ?? initialViewportWidth) - APP_SHELL_INLINE_PADDING);
   const gridTemplateColumns = [
-    leftColumnCount > 0 ? `${getLogicalGridSize(leftColumnCount)}px` : null,
-    `${getLogicalGridSize(mainColumnCount)}px`,
-    rightColumnCount > 0 ? `${getLogicalGridSize(rightColumnCount)}px` : null,
+    leftColumnCount > 0 ? `${getLogicalTrackSize(leftColumnCount)}px` : null,
+    `${getLogicalTrackSize(mainColumnCount)}px`,
+    rightColumnCount > 0 ? `${getLogicalTrackSize(rightColumnCount)}px` : null,
   ]
     .filter((value) => value !== null)
     .join(" ");

apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-/* eslint-disable react/no-unstable-nested-components -- Widget modules and definition-bound fallbacks are loaded dynamically. */
-
 import { use, useCallback, useState } from "react";
 import { ActionIcon, Affix, Card } from "@mantine/core";
 import { IconDimensions, IconPencil, IconToggleLeft, IconToggleRight } from "@tabler/icons-react";
@@ -73,7 +71,6 @@ export const WidgetPreviewPageContent = ({ kind }: WidgetPreviewPageContentProps
           ),
           integrationSupport: hasIntegrationSupport,
           settings,
-          previewDimensions: dimensions,
         },
         {
           title(translate) {
@@ -89,10 +86,10 @@ export const WidgetPreviewPageContent = ({ kind }: WidgetPreviewPageContentProps
     } finally {
       setIsEditorLoading(false);
     }
-  }, [currentDefinition, dimensions, kind, openWidgetEditModal, settings, state, t, utils]);
+  }, [currentDefinition, kind, openWidgetEditModal, settings, state, t, utils]);
 
   const toggleEditMode = useCallback(() => {
-    setEditMode((currentEditMode) => !currentEditMode);
+    setEditMode((editMode) => !editMode);
     showSuccessNotification({
       message: editMode ? t("widgetPreview.toggle.disabled") : t("widgetPreview.toggle.enabled"),
     });

apps/nextjs/src/app/[locale]/widgets/[kind]/page.tsx

@@ -1,14 +1,8 @@
 import { Suspense } from "react";
-import { notFound, redirect } from "next/navigation";
+import { notFound } from "next/navigation";
 import { Center, Loader } from "@mantine/core";
 
-import { getHomeBoardAsync } from "@homarr/api/board-server";
-import { IntegrationProvider } from "@homarr/auth/client";
-import { auth } from "@homarr/auth/next";
-import { getIntegrationsWithPermissionsAsync } from "@homarr/auth/server";
-import { BoardPreviewProvider } from "@homarr/boards/context";
 import type { WidgetKind } from "@homarr/definitions";
-import { ModalProvider } from "@homarr/modals";
 import { widgetKinds } from "@homarr/widgets/manifest";
 
 import { WidgetPreviewPageContent } from "./_content";
@@ -22,24 +16,12 @@ export default async function WidgetPreview(props: Props) {
   if (!widgetKinds.includes(kind as WidgetKind)) {
     notFound();
   }
-  const session = await auth();
-  if (!session) {
-    redirect(`/auth/login?callbackUrl=${encodeURIComponent(`/widgets/${kind}`)}`);
-  }
-
-  const [integrations, board] = await Promise.all([getIntegrationsWithPermissionsAsync(session), getHomeBoardAsync()]);
 
   return (
-    <IntegrationProvider integrations={integrations}>
-      <BoardPreviewProvider board={board}>
-        <ModalProvider>
-          <Center h="100vh">
-            <Suspense fallback={<Loader size="sm" />}>
-              <WidgetPreviewPageContent key={kind} kind={kind as WidgetKind} />
-            </Suspense>
-          </Center>
-        </ModalProvider>
-      </BoardPreviewProvider>
-    </IntegrationProvider>
+    <Center h="100vh">
+      <Suspense fallback={<Loader size="sm" />}>
+        <WidgetPreviewPageContent key={kind} kind={kind as WidgetKind} />
+      </Suspense>
+    </Center>
   );
 }

apps/nextjs/src/components/board/board-layout-thumbnail.module.css

@@ -1,6 +1,5 @@
 .canvas {
-  width: 100%;
-  min-width: 0;
+  min-height: 8rem;
   aspect-ratio: 16 / 7;
   overflow: hidden;
   color: var(--mantine-color-dimmed);
@@ -84,3 +83,9 @@
   gap: rem(1px);
   overflow: hidden;
 }
+
+@media (max-width: $mantine-breakpoint-xs) {
+  .canvas {
+    min-height: 7rem;
+  }
+}

apps/nextjs/src/components/board/board-layout-thumbnail.tsx

@@ -11,12 +11,11 @@ import classes from "./board-layout-thumbnail.module.css";
 interface BoardLayoutThumbnailProps {
   preview: BoardPreviewData | null;
   label: string;
-  fitFullLayout?: boolean;
 }
 
 const maxThumbnailRows = 12;
 
-export const BoardLayoutThumbnail = ({ preview, label, fitFullLayout = false }: BoardLayoutThumbnailProps) => {
+export const BoardLayoutThumbnail = ({ preview, label }: BoardLayoutThumbnailProps) => {
   const layout = preview?.layouts.find((candidate) => candidate.role === "base") ?? preview?.layouts.at(0);
   if (!preview || !layout) {
     return (
@@ -27,7 +26,6 @@ export const BoardLayoutThumbnail = ({ preview, label, fitFullLayout = false }:
   }
 
   const elements = projectBoardLayout(preview, layout, layout);
-  const thumbnailRowLimit = fitFullLayout ? Number.POSITIVE_INFINITY : maxThumbnailRows;
   const roots = preview.sections
     .filter((section) => section.kind === "empty")
     .toSorted((first, second) => (first.xOffset ?? 0) - (second.xOffset ?? 0) || first.id.localeCompare(second.id));
@@ -67,12 +65,12 @@ export const BoardLayoutThumbnail = ({ preview, label, fitFullLayout = false }:
               element.xOffset >= 0 &&
               element.xOffset < columnCount &&
               element.yOffset >= 0 &&
-              element.yOffset < thumbnailRowLimit &&
+              element.yOffset < maxThumbnailRows &&
               element.width > 0 &&
               element.height > 0,
           );
           const rowCount = Math.min(
-            thumbnailRowLimit,
+            maxThumbnailRows,
             Math.max(4, ...laneElements.map((element) => element.yOffset + element.height)),
           );
 

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

@@ -1,26 +1,7 @@
-.modalContent {
-  overflow: hidden;
-  border: rem(1px) solid color-mix(in srgb, var(--mantine-color-default-border) 70%, transparent);
-  border-radius: rem(24px);
-  background: color-mix(in srgb, var(--mantine-color-body) 58%, transparent);
-  box-shadow: 0 rem(18px) rem(56px) rgb(0 0 0 / 22%);
-  backdrop-filter: blur(rem(20px)) saturate(140%);
-}
-
-.modalBody {
-  padding: var(--mantine-spacing-sm);
-}
-
 .content {
   outline: none;
 }
 
-.searchInput {
-  border-color: color-mix(in srgb, var(--mantine-color-default-border) 72%, transparent);
-  background: color-mix(in srgb, var(--mantine-color-body) 54%, transparent);
-  backdrop-filter: blur(rem(8px));
-}
-
 .option {
   min-width: 0;
   border-radius: var(--mantine-radius-md);
@@ -30,12 +11,6 @@
 .card {
   height: 100%;
   overflow: hidden;
-  box-shadow: var(--mantine-shadow-sm);
-}
-
-.metadataBadge {
-  width: rem(22px);
-  padding-inline: 0;
 }
 
 .option:hover .card,

apps/nextjs/src/components/board/board-switcher.tsx

@@ -3,31 +3,29 @@
 import type { KeyboardEvent, ReactNode, RefObject } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
-  Badge,
   Card,
   Center,
   Group,
+  Kbd,
   Loader,
   Modal,
   ScrollArea,
   SimpleGrid,
   Stack,
   Text,
-  TextInput,
   ThemeIcon,
-  Tooltip,
   UnstyledButton,
   useMatches,
   VisuallyHidden,
 } from "@mantine/core";
 import { useHotkeys } from "@mantine/hooks";
-import { IconDeviceMobile, IconHomeFilled, IconLayoutBoard, IconSearch } from "@tabler/icons-react";
+import { IconArrowDown, IconArrowRight, IconLayoutBoard, IconReplace } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useOptionalBoard } from "@homarr/boards/context";
 import { useI18n } from "@homarr/translation/client";
-import { Link, UserAvatar } from "@homarr/ui";
+import { Link } from "@homarr/ui";
 
 import { BoardLayoutThumbnail } from "~/components/board/board-layout-thumbnail";
 
@@ -41,7 +39,6 @@ interface BoardSwitcherProps {
 
 export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {
   const t = useI18n("board.action.switcher");
-  const manageBoardsT = useI18n("management.page.board");
   const currentBoard = useOptionalBoard();
   const [isOpen, setIsOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -53,27 +50,20 @@ export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {
     data: boards = [],
     isPending,
     isError,
-  } = clientApi.board.getManageOverview.useQuery(
-    { fullPreview: true },
-    {
-      enabled: isOpen,
-    },
-  );
+  } = clientApi.board.getManageOverview.useQuery(undefined, {
+    enabled: isOpen,
+  });
 
-  const switcherBoards = useMemo(
-    () => [
-      ...boards.filter((board) => board.id !== currentBoard?.id),
-      ...boards.filter((board) => board.id === currentBoard?.id),
-    ],
+  const availableBoards = useMemo(
+    () => boards.filter((board) => board.id !== currentBoard?.id),
     [boards, currentBoard?.id],
   );
   const filteredBoards = useMemo(() => {
     const normalizedSearch = search.trim().toLocaleLowerCase();
-    if (normalizedSearch.length === 0) return switcherBoards;
-    return switcherBoards.filter((board) => board.name.toLocaleLowerCase().includes(normalizedSearch));
-  }, [search, switcherBoards]);
+    if (normalizedSearch.length === 0) return availableBoards;
+    return availableBoards.filter((board) => board.name.toLocaleLowerCase().includes(normalizedSearch));
+  }, [availableBoards, search]);
   const columnCount = Math.max(1, Math.min(filteredBoards.length, responsiveColumnCount));
-  const modalColumnCount = Math.max(1, Math.min(switcherBoards.length, responsiveColumnCount));
 
   const openSwitcher = useCallback(() => {
     setIsOpen(true);
@@ -83,7 +73,7 @@ export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {
     setSearch("");
     setActiveIndex(0);
   }, []);
-  const preloadBoards = () => void utils.board.getManageOverview.prefetch({ fullPreview: true });
+  const preloadBoards = () => void utils.board.getManageOverview.prefetch();
 
   useHotkeys([[boardSwitcherHotkey, openSwitcher, { preventDefault: true }]]);
 
@@ -98,17 +88,14 @@ export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {
   }, [activeIndex, filteredBoards.length, isOpen]);
 
   const handleModalKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    const isSearchInput =
-      event.target instanceof HTMLInputElement && event.target.dataset.boardSwitcherSearch !== undefined;
-
-    if (!isSearchInput && event.key === "Backspace") {
+    if (event.key === "Backspace") {
       event.preventDefault();
       setSearch((current) => current.slice(0, -1));
       setActiveIndex(0);
       return;
     }
 
-    if (!isSearchInput && event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+    if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
       event.preventDefault();
       setSearch((current) => `${current}${event.key}`);
       setActiveIndex(0);
@@ -154,7 +141,7 @@ export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {
   };
 
   const results = getBoardSwitcherResults({
-    availableBoardCount: switcherBoards.length,
+    availableBoardCount: availableBoards.length,
     filteredBoards,
     isError,
     isPending,
@@ -165,7 +152,6 @@ export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {
     setActiveIndex,
     optionRefs,
     columnCount,
-    manageBoardsT,
   });
 
   return (
@@ -175,40 +161,54 @@ export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {
       <Modal
         opened={isOpen}
         onClose={closeSwitcher}
-        withCloseButton={false}
-        yOffset="15vh"
-        aria-label={t("title")}
-        size={`${modalColumnCount * 15 + Math.max(0, modalColumnCount - 1) * 0.75}rem`}
-        overlayProps={{ backgroundOpacity: 0, blur: 2 }}
+        title={
+          <Group gap="sm" wrap="nowrap">
+            <ThemeIcon variant="light" radius="md">
+              <IconReplace size={18} stroke={1.5} />
+            </ThemeIcon>
+            <Text fw={700}>{t("title")}</Text>
+          </Group>
+        }
+        size={1280}
+        yOffset={32}
+        overlayProps={{ backgroundOpacity: 0.18, blur: 2 }}
         transitionProps={{ transition: "fade", duration: 100, timingFunction: "ease" }}
-        classNames={{ content: classes.modalContent, body: classes.modalBody }}
       >
         <Stack
+          data-autofocus
           tabIndex={-1}
-          gap="xs"
+          gap="md"
           onKeyDown={handleModalKeyDown}
           className={classes.content}
           aria-describedby="board-switcher-instructions"
         >
           <VisuallyHidden id="board-switcher-instructions">{t("keyboard.instructions")}</VisuallyHidden>
-          <TextInput
-            data-autofocus
-            data-board-switcher-search
-            value={search}
-            onChange={(event) => {
-              setSearch(event.currentTarget.value);
-              setActiveIndex(0);
-            }}
-            leftSection={<IconSearch size="1rem" stroke={1.6} />}
-            placeholder={t("title")}
-            aria-label={t("title")}
-            aria-controls="board-switcher-results"
-            radius="xl"
-            classNames={{ input: classes.searchInput }}
-          />
-          <ScrollArea.Autosize mah="min(80vh, 42rem)" type="never">
+          <ScrollArea.Autosize mah={640} type="auto" offsetScrollbars>
             {results}
           </ScrollArea.Autosize>
+
+          <Group justify={currentBoard ? "space-between" : "flex-end"} gap="xs" visibleFrom="sm">
+            {currentBoard && (
+              <Text size="xs" c="dimmed">
+                {t("currentHidden", { name: currentBoard.name })}
+              </Text>
+            )}
+            <Group gap="xs">
+              <Kbd size="xs">
+                <IconArrowRight size={12} />
+              </Kbd>
+              <Kbd size="xs">
+                <IconArrowDown size={12} />
+              </Kbd>
+              <Text size="xs" c="dimmed">
+                {t("keyboard.navigate")}
+              </Text>
+              <Kbd size="xs">Enter</Kbd>
+              <Text size="xs" c="dimmed">
+                {t("keyboard.open")}
+              </Text>
+            </Group>
+          </Group>
         </Stack>
       </Modal>
     </>
@@ -227,7 +227,6 @@ interface BoardSwitcherResultsProps {
   setActiveIndex: (index: number) => void;
   optionRefs: RefObject<Array<HTMLAnchorElement | null>>;
   columnCount: number;
-  manageBoardsT: ReturnType<typeof useI18n<"management.page.board">>;
 }
 
 const getBoardSwitcherResults = ({
@@ -242,7 +241,6 @@ const getBoardSwitcherResults = ({
   setActiveIndex,
   optionRefs,
   columnCount,
-  manageBoardsT,
 }: BoardSwitcherResultsProps) => {
   if (isPending) {
     return (
@@ -289,7 +287,7 @@ const getBoardSwitcherResults = ({
   }
 
   return (
-    <SimpleGrid id="board-switcher-results" aria-label={t("results")} cols={columnCount} spacing="xs" p={2}>
+    <SimpleGrid id="board-switcher-results" aria-label={t("results")} cols={columnCount} spacing="md" p={4}>
       {filteredBoards.map((board, index) => (
         <UnstyledButton
           key={board.id}
@@ -298,7 +296,7 @@ const getBoardSwitcherResults = ({
           }}
           className={classes.option}
           w="100%"
-          maw={240}
+          maw={320}
           mx="auto"
           component={Link}
           href={`/boards/${encodeURIComponent(board.name)}`}
@@ -308,50 +306,21 @@ const getBoardSwitcherResults = ({
           onFocus={() => setActiveIndex(index)}
           onPointerEnter={() => setActiveIndex(index)}
         >
-          <Card padding={0} withBorder radius="lg" className={classes.card}>
+          <Card padding={0} withBorder radius="md" className={classes.card}>
             <Card.Section>
               <BoardLayoutThumbnail
                 preview={board.preview}
                 label={t("preview", { name: board.name, count: String(board.preview?.items.length ?? 0) })}
-                fitFullLayout
               />
             </Card.Section>
-            <Card.Section withBorder px="sm" py={6}>
-              <Group justify="space-between" gap="xs" wrap="nowrap">
-                <Text fw={600} size="sm" truncate>
+            <Card.Section withBorder p="sm">
+              <Group gap="sm" wrap="nowrap">
+                <ThemeIcon variant="light" radius="md" size="md">
+                  <IconLayoutBoard size={16} stroke={1.5} />
+                </ThemeIcon>
+                <Text fw={650} truncate>
                   {board.name}
                 </Text>
-                <Group gap={4} wrap="nowrap">
-                  {board.isHome && (
-                    <Tooltip label={manageBoardsT("action.setHomeBoard.badge.tooltip")}>
-                      <Badge
-                        className={classes.metadataBadge}
-                        color="yellow"
-                        variant="light"
-                        aria-label={manageBoardsT("action.setHomeBoard.badge.label")}
-                      >
-                        <IconHomeFilled size="0.7rem" />
-                      </Badge>
-                    </Tooltip>
-                  )}
-                  {board.isMobileHome && (
-                    <Tooltip label={manageBoardsT("action.setMobileHomeBoard.badge.tooltip")}>
-                      <Badge
-                        className={classes.metadataBadge}
-                        color="yellow"
-                        variant="light"
-                        aria-label={manageBoardsT("action.setMobileHomeBoard.badge.label")}
-                      >
-                        <IconDeviceMobile size="0.7rem" />
-                      </Badge>
-                    </Tooltip>
-                  )}
-                  {board.creator && (
-                    <Tooltip label={board.creator.name ?? manageBoardsT("preview.unknownCreator")}>
-                      <UserAvatar user={board.creator} size="xs" />
-                    </Tooltip>
-                  )}
-                </Group>
               </Group>
             </Card.Section>
           </Card>

apps/nextjs/src/components/board/items/item-content.module.css

@@ -1,3 +1,16 @@
+.badge {
+  @mixin dark {
+    --background-color: rgb(from var(--mantine-color-dark-6) r g b / var(--opacity));
+    --border-color: rgb(from var(--mantine-color-dark-4) r g b / var(--opacity));
+  }
+  @mixin light {
+    --background-color: rgb(from var(--mantine-color-white) r g b / var(--opacity));
+    --border-color: rgb(from var(--mantine-color-gray-3) r g b / var(--opacity));
+  }
+  background-color: var(--background-color) !important;
+  border-color: var(--border-color) !important;
+}
+
 .settingsButton {
   opacity: 0;
   pointer-events: none;

apps/nextjs/src/components/board/items/item-content.tsx

@@ -1,8 +1,9 @@
-import type { ComponentType, CSSProperties, MutableRefObject, PropsWithChildren } from "react";
+import type { ComponentType, CSSProperties, MutableRefObject } from "react";
 import { memo, Suspense, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import dynamic from "next/dynamic";
-import { Box, Button, Center, Loader, Portal } from "@mantine/core";
+import type { CardProps } from "@mantine/core";
+import { Badge, Box, Button, Card, Center, Loader, Portal } from "@mantine/core";
 import { useElementSize, useIsomorphicEffect } from "@mantine/hooks";
 import { QueryErrorResetBoundary, useQueryClient } from "@tanstack/react-query";
 import combineClasses from "clsx";
@@ -23,11 +24,9 @@ import {
 } from "@homarr/widgets/definition";
 import type { WidgetComponentProps, WidgetDefinition, WidgetRuntimeRef } from "@homarr/widgets/definition";
 import { loadWidgetResources, reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
-import { WidgetCardShell, WidgetTitleBadge } from "@homarr/widgets/widget-card-shell";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
 import { getLogicalTrackSize } from "~/components/board/layout";
-import { useBoardCanvasScale } from "~/components/board/layout/scaled-board-canvas";
 import advancedFocusClasses from "../advanced-focus/advanced-focus.module.css";
 import { useAdvancedFocus } from "../advanced-focus/context";
 import { startAdvancedFocusEntrance } from "../advanced-focus/entrance";
@@ -35,6 +34,7 @@ import { getAdvancedFocusClosePosition, getAdvancedFocusRect } from "../advanced
 import { AdvancedFocusManualSurface } from "../advanced-focus/manual-surface";
 import { redirectShiftWheel } from "../advanced-focus/wheel";
 import { useBoardGridPortalHost } from "../sections/grid/grid-portal-host";
+import classes from "../sections/item.module.css";
 import { useItemActions } from "./item-actions";
 import itemContentClasses from "./item-content.module.css";
 import { WidgetContextMenu } from "./widget-context-menu";
@@ -48,28 +48,47 @@ interface BoardItemContentProps {
   item: SectionItem;
 }
 
-type BoardItemCardProps = PropsWithChildren<{
+const getOverflowFromKind = (kind: SectionItem["kind"], hasCustomCssClasses: boolean) => {
+  if (kind === "systemResources") return { overflowX: "visible", overflowY: "visible" } as const;
+  if (kind === "iframe" || kind === "assistant") return { overflowX: "hidden", overflowY: "hidden" } as const;
+  if (hasCustomCssClasses) return {};
+  return { overflowX: "hidden", overflowY: "auto" } as const;
+};
+
+type BoardItemCardProps = CardProps & {
   item: SectionItem;
   innerRef: (element: HTMLDivElement | null) => void;
-}>;
+};
 
-const BoardItemCard = ({ item, innerRef, children }: BoardItemCardProps) => {
+const BoardItemCard = ({ item, innerRef, children, ...cardProps }: BoardItemCardProps) => {
   const board = useRequiredBoard();
 
   return (
-    <WidgetCardShell
-      innerRef={innerRef}
-      kind={item.kind}
-      advancedOptions={item.advancedOptions}
-      opacity={board.opacity / 100}
+    <Card
+      {...cardProps}
+      ref={innerRef}
       w="100%"
       h="100%"
       data-grid-item-content
+      className={combineClasses(
+        classes.itemCard,
+        `${item.kind}-wrapper`,
+        "board-grid-item-content",
+        item.advancedOptions.customCssClasses.join(" "),
+      )}
       radius={board.itemRadius}
+      styles={{
+        root: {
+          "--opacity": board.opacity / 100,
+          containerType: "size",
+          ...getOverflowFromKind(item.kind, item.advancedOptions.customCssClasses.length > 0),
+          "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
+        },
+      }}
       p={0}
     >
       {children}
-    </WidgetCardShell>
+    </Card>
   );
 };
 
@@ -148,7 +167,6 @@ const LoadedBoardItemContent = ({
   const cardRef = useRef<HTMLDivElement>(null);
   const previewEntranceFrameRef = useRef<number | null>(null);
   const board = useRequiredBoard();
-  const boardCanvasScale = useBoardCanvasScale();
   const t = useI18n();
   const [isEditMode] = useEditMode();
   const settings = useSettings();
@@ -162,10 +180,6 @@ const LoadedBoardItemContent = ({
   const { width: viewportWidth, height: viewportHeight } = viewportSize;
   const supportsAdvancedFocus = definitionSupportsAdvancedFocus(definition);
   const widgetName = getWidgetName(item.kind, t);
-  const previewDimensions = useMemo(
-    () => ({ width, height, scale: boardCanvasScale }),
-    [boardCanvasScale, height, width],
-  );
   const advancedViewLabel = t("item.advancedFocus.label", { widget: widgetName });
   const advancedViewId = `advanced-focus-${item.id}`;
   const activeFocus = supportsAdvancedFocus && active?.itemId === item.id ? active : null;
@@ -277,11 +291,8 @@ const LoadedBoardItemContent = ({
       : undefined;
 
   const widgetCard = (
-    <WidgetCardShell
-      innerRef={cardRef}
-      kind={item.kind}
-      advancedOptions={item.advancedOptions}
-      opacity={isAdvanced ? 0.98 : board.opacity / 100}
+    <Card
+      ref={cardRef}
       id={isPreview ? advancedViewId : undefined}
       role={isPreview ? "region" : undefined}
       aria-label={isPreview ? advancedViewLabel : undefined}
@@ -292,9 +303,21 @@ const LoadedBoardItemContent = ({
       h={isManual ? "100%" : isAdvanced ? undefined : "100%"}
       w={isManual ? "100%" : isAdvanced ? undefined : "100%"}
       className={combineClasses(
+        classes.itemCard,
+        `${item.kind}-wrapper`,
+        "board-grid-item-content",
         isPreview && advancedFocusClasses.surface,
         activeFocus?.phase === "closing" && isPreview && advancedFocusClasses.surfaceClosing,
+        item.advancedOptions.customCssClasses.join(" "),
       )}
+      styles={{
+        root: {
+          "--opacity": isAdvanced ? 0.98 : board.opacity / 100,
+          containerType: "size",
+          ...getOverflowFromKind(item.kind, item.advancedOptions.customCssClasses.length > 0),
+          "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
+        },
+      }}
       style={previewStyle}
     >
       <Box ref={contentRef} w="100%" h="100%" mih={0}>
@@ -322,16 +345,15 @@ const LoadedBoardItemContent = ({
           />
         </ErrorBoundary>
       </Box>
-    </WidgetCardShell>
+    </Card>
   );
 
   return (
     <>
-      {isEditMode && <BoardItemMenu item={menuItem} definition={definition} previewDimensions={previewDimensions} />}
+      {isEditMode && <BoardItemMenu item={menuItem} definition={definition} />}
       <WidgetContextMenu
         item={item}
         definition={definition}
-        previewDimensions={previewDimensions}
         widgetStateRef={widgetStateRef}
         widgetRuntimeRef={widgetRuntimeRef}
         sourceRef={sourceRef}
@@ -396,12 +418,25 @@ const LoadedBoardItemContent = ({
           )}
         </Box>
       </WidgetContextMenu>
-      {!isAdvanced && (
-        <WidgetTitleBadge
-          advancedOptions={item.advancedOptions}
-          opacity={board.opacity / 100}
+      {!isAdvanced && item.advancedOptions.title?.trim() && (
+        <Badge
+          pos="absolute"
+          style={{ zIndex: "var(--mantine-z-index-app)" }}
+          top={2}
+          left={16}
+          size="xs"
           radius={board.itemRadius}
-        />
+          styles={{
+            root: {
+              "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
+              "--opacity": board.opacity / 100,
+            },
+          }}
+          className={itemContentClasses.badge}
+          c="var(--mantine-color-text)"
+        >
+          {item.advancedOptions.title}
+        </Badge>
       )}
     </>
   );

apps/nextjs/src/components/board/items/item-menu.tsx

@@ -21,7 +21,6 @@ import { LazyWidgetEditModal, preloadWidgetEditModal } from "./lazy-widget-edit-
 interface BoardItemMenuProps {
   item: SectionItem;
   definition: WidgetDefinition;
-  previewDimensions: { width: number; height: number; scale?: number };
   resetErrorBoundary?: () => void;
 }
 
@@ -32,7 +31,7 @@ export const BoardItemMenu = (props: BoardItemMenuProps) => {
 
   return <BoardItemMenuInner {...props} />;
 };
-const BoardItemMenuInner = ({ item, definition, previewDimensions, resetErrorBoundary }: BoardItemMenuProps) => {
+const BoardItemMenuInner = ({ item, definition, resetErrorBoundary }: BoardItemMenuProps) => {
   const { data: session } = useSession();
   const canDuplicate = item.kind !== "customApi" || (session?.user.permissions.includes("admin") ?? false);
   const refResetErrorBoundaryOnNextRender = useRef(false);
@@ -90,7 +89,6 @@ const BoardItemMenuInner = ({ item, definition, previewDimensions, resetErrorBou
         integrationSupport: "supportedIntegrations" in definition,
         settings,
         itemId: item.id,
-        previewDimensions,
         appId: item.kind === "app" ? (item.options.appId as string | undefined) : undefined,
       },
       {

apps/nextjs/src/components/board/items/item-select-modal.tsx

@@ -30,7 +30,6 @@ import {
   getIntegrationName,
   getWidgetName,
   getRootSectionLane,
-  widgetDefaultSizes,
   widgetIntegrationSupport,
   widgetKinds,
   widgetKindsWithOptionalIntegrations,
@@ -48,7 +47,6 @@ import { loadWidgetDefinition, reduceWidgetOptionsWithDefinition } from "@homarr
 import type { EmptySection } from "~/app/[locale]/boards/_types";
 import { useSetupAnalytics } from "~/components/create/setup-analytics";
 import { IntegrationSelectModal } from "~/components/integration/integration-select-modal";
-import { getSectionGridColumnCount } from "../sections/grid/section-grid-placements";
 import { useItemActions } from "./item-actions";
 import type { WidgetConnectionStatus } from "./item-select-data";
 import {
@@ -78,8 +76,6 @@ export interface WidgetItemData {
 }
 
 const selectGridCols = { base: 1, xs: 2, sm: 2, md: 3, lg: 4 };
-const defaultWidgetSize = { width: 1, height: 1 };
-const maximumWidgetHeight = 64;
 
 const ItemSelectModalContent = ({
   actions,
@@ -128,13 +124,6 @@ const ItemSelectModalContent = ({
   const effectiveSectionId = placementOptions.some(({ value }) => value === targetSectionId)
     ? targetSectionId
     : (placementOptions[0]?.value ?? null);
-  const maximumWidgetSize = useMemo(() => {
-    if (!effectiveSectionId) return defaultWidgetSize;
-    return {
-      width: Math.max(1, getSectionGridColumnCount(board, currentLayoutId, effectiveSectionId) ?? 1),
-      height: maximumWidgetHeight,
-    };
-  }, [board, currentLayoutId, effectiveSectionId]);
 
   const [loadingSelection, setLoadingSelection] = useState<string | null>(null);
   const selectionLock = useRef(false);
@@ -257,7 +246,6 @@ const ItemSelectModalContent = ({
     try {
       const definition = await loadWidgetDefinition("customApi");
       const itemId = createId();
-      const initialSize = widgetDefaultSizes.customApi ?? defaultWidgetSize;
       const defaultOptions = reduceWidgetOptionsWithDefinition(definition, settings);
       const options = {
         ...defaultOptions,
@@ -275,7 +263,7 @@ const ItemSelectModalContent = ({
             options,
             integrationIds: [],
           },
-          onSuccessfulEdit: ({ options: configuredOptions, advancedOptions }, selectedSize) => {
+          onSuccessfulEdit: ({ options: configuredOptions, advancedOptions }) => {
             const updatedBoard = createItem({
               id: itemId,
               kind: "customApi",
@@ -283,14 +271,12 @@ const ItemSelectModalContent = ({
               options: configuredOptions,
               targetSectionId: effectiveSectionId ?? undefined,
               advancedOptions,
-              size: selectedSize ?? initialSize,
             });
             notifyCreated(updatedBoard, itemId, customWidgetDefinition.name);
           },
           integrationData: [],
           integrationSupport: false,
           settings,
-          previewResize: { initialSize, maximumSize: maximumWidgetSize },
         },
         {
           title: (titleT) => `${titleT("item.edit.title")} - ${customWidgetDefinition.name}`,
@@ -325,7 +311,6 @@ const ItemSelectModalContent = ({
       const matchingIntegrationCount = Math.min(matchingIntegrations.length, maxIntegrations);
       const itemId = createId();
       const defaultOptions = reduceWidgetOptionsWithDefinition(definition, settings);
-      const initialSize = widgetDefaultSizes[kind] ?? defaultWidgetSize;
       const openEditor = (
         availableIntegrations: { id: string; name: string; url: string; kind: IntegrationKind }[],
       ) => {
@@ -341,7 +326,7 @@ const ItemSelectModalContent = ({
               options: defaultOptions,
               integrationIds: selectedIntegrationIds,
             },
-            onSuccessfulEdit: ({ options, integrationIds: newIntegrationIds, advancedOptions }, selectedSize) => {
+            onSuccessfulEdit: ({ options, integrationIds: newIntegrationIds, advancedOptions }) => {
               const updatedBoard = createItem({
                 id: itemId,
                 kind,
@@ -349,7 +334,6 @@ const ItemSelectModalContent = ({
                 integrationIds: newIntegrationIds,
                 targetSectionId: effectiveSectionId ?? undefined,
                 advancedOptions,
-                size: selectedSize ?? initialSize,
               });
               if (!notifyCreated(updatedBoard, itemId, getWidgetName(kind, t))) return;
               trackSetup("widget-completed", {
@@ -362,7 +346,6 @@ const ItemSelectModalContent = ({
             integrationData: availableIntegrations,
             integrationSupport: hasIntegrationSupport,
             settings,
-            previewResize: { initialSize, maximumSize: maximumWidgetSize },
           },
           {
             title: (titleT) => `${titleT("item.edit.title")} - ${getWidgetName(kind, titleT)}`,

apps/nextjs/src/components/board/items/lazy-widget-edit-modal.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import type { PropsWithChildren } from "react";
 import { Suspense, use, useCallback, useMemo, useState } from "react";
 import { Center, Loader } from "@mantine/core";
 import { ErrorBoundary } from "react-error-boundary";
@@ -8,49 +7,16 @@ import type { FallbackProps } from "react-error-boundary";
 
 import { clientApi } from "@homarr/api/client";
 import type { WidgetKind } from "@homarr/definitions";
-import { widgetDefaultSizes } from "@homarr/definitions";
-import { createModal, useModalAction } from "@homarr/modals";
+import { createModal, modalSizeForm, useModalAction } from "@homarr/modals";
 import { WidgetError } from "@homarr/widgets/errors";
 import type * as WidgetModalsModule from "@homarr/widgets/modals";
-import type { WidgetEditModalProps, WidgetEditModalSize } from "@homarr/widgets/modals";
-import { loadWidgetComponent } from "@homarr/widgets/manifest";
+import type { WidgetEditModalProps } from "@homarr/widgets/modals";
 import type { IntegrationSelectOption } from "@homarr/widgets/widget-integration-select";
 
-import { AssistantContext, useOptionalHomarrAssistant } from "~/components/assistant/assistant-context";
-import { getLogicalTrackSize } from "~/components/board/layout";
 import { IntegrationSelectModal } from "~/components/integration/integration-select-modal";
 import type * as IntegrationEditFormModule from "~/components/integration/embedded-integration-edit-form";
 import type { EmbeddedIntegrationEditFormProps } from "~/components/integration/embedded-integration-edit-form";
 
-const defaultWidgetSize = { width: 1, height: 1 };
-const ignoreAssistantAction = () => undefined;
-const ignoreAssistantPrompt = () => false;
-const ignoreAssistantRefresh = () => Promise.resolve();
-const getPreviewDimensions = (size: WidgetEditModalSize) => ({
-  width: getLogicalTrackSize(size.width),
-  height: getLogicalTrackSize(size.height),
-});
-
-const PreviewRuntimeWrapper = ({ children }: PropsWithChildren) => {
-  const assistant = useOptionalHomarrAssistant();
-  const previewAssistant = useMemo(() => {
-    if (!assistant) return null;
-    return {
-      ...assistant,
-      open: ignoreAssistantAction,
-      close: ignoreAssistantAction,
-      toggle: ignoreAssistantAction,
-      sendPrompt: ignoreAssistantPrompt,
-      refreshCurrentView: ignoreAssistantRefresh,
-      setWidgetVisible: ignoreAssistantAction,
-      activateWidget: ignoreAssistantAction,
-    };
-  }, [assistant]);
-
-  if (!previewAssistant) return children;
-  return <AssistantContext.Provider value={previewAssistant}>{children}</AssistantContext.Provider>;
-};
-
 let widgetEditModalPromise: Promise<typeof WidgetModalsModule> | undefined;
 
 export const loadWidgetEditModal = () => {
@@ -117,7 +83,6 @@ interface LazyWidgetEditModalContentProps {
 
 const LazyWidgetEditModalContent = (props: LazyWidgetEditModalContentProps) => {
   const { WidgetEditModal } = use(loadWidgetEditModal());
-  const { default: PreviewComponent } = use(loadWidgetComponent(props.innerProps.kind));
   const { openModal: openIntegrationModal } = useModalAction(IntegrationSelectModal);
   const Component = WidgetEditModal.component;
   const utils = clientApi.useUtils();
@@ -149,18 +114,6 @@ const LazyWidgetEditModalContent = (props: LazyWidgetEditModalContentProps) => {
     const additional = createdIntegrations.filter((c) => !existing.some((e) => e.id === c.id));
     return [...existing, ...additional];
   }, [props.innerProps.integrationData, createdIntegrations]);
-  const previewDimensions = useMemo(() => {
-    if (props.innerProps.previewDimensions) return props.innerProps.previewDimensions;
-    const size = widgetDefaultSizes[props.innerProps.kind] ?? defaultWidgetSize;
-    return {
-      width: getLogicalTrackSize(size.width),
-      height: getLogicalTrackSize(size.height),
-    };
-  }, [props.innerProps.kind, props.innerProps.previewDimensions]);
-  let previewResize = props.innerProps.previewResize;
-  if (previewResize) {
-    previewResize = { ...previewResize, getDimensions: getPreviewDimensions };
-  }
 
   return (
     <Component
@@ -169,10 +122,6 @@ const LazyWidgetEditModalContent = (props: LazyWidgetEditModalContentProps) => {
         ...props.innerProps,
         integrationData: combinedIntegrationData,
         integrationEditForm: LazyIntegrationEditForm,
-        previewComponent: PreviewComponent,
-        previewDimensions,
-        previewResize,
-        previewWrapper: PreviewRuntimeWrapper,
         onOpenNewIntegration: supportedKinds.length > 0 ? handleOpenNewIntegration : undefined,
       }}
     />
@@ -208,10 +157,6 @@ export const LazyWidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>
   defaultTitle(t) {
     return t("item.edit.title");
   },
-  size: "100rem",
-  transitionProps: {
-    transition: "pop",
-    duration: 180,
-  },
+  size: modalSizeForm,
   closeOnClickOutside: false,
 });

apps/nextjs/src/components/board/items/widget-context-menu.tsx

@@ -35,7 +35,6 @@ import { matchesWidgetItemQuery } from "./widget-query-scope";
 interface WidgetContextMenuProps {
   item: SectionItem;
   definition: WidgetDefinition;
-  previewDimensions: { width: number; height: number; scale?: number };
   widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
   widgetRuntimeRef: WidgetRuntimeRef;
   sourceRef: RefObject<HTMLElement | null>;
@@ -45,7 +44,6 @@ interface WidgetContextMenuProps {
 export const WidgetContextMenu = ({
   item,
   definition,
-  previewDimensions,
   widgetRuntimeRef,
   sourceRef,
   children,
@@ -162,7 +160,7 @@ export const WidgetContextMenu = ({
         definition,
         value: {
           advancedOptions: item.advancedOptions,
-          options,
+          options: item.options,
           integrationIds: item.integrationIds,
         },
         onSuccessfulEdit: (editResult) => {
@@ -191,9 +189,6 @@ export const WidgetContextMenu = ({
         ),
         integrationSupport: definition.supportedIntegrations !== undefined,
         settings,
-        itemId: item.id,
-        boardId: board.id,
-        previewDimensions,
         appId: item.kind === "app" ? (item.options.appId as string | undefined) : undefined,
       },
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -202,15 +197,12 @@ export const WidgetContextMenu = ({
       },
     );
   }, [
-    board.id,
     definition,
     integrationData,
     item,
     handleRefetch,
     openModal,
-    options,
     persistBoard,
-    previewDimensions,
     settings,
     updateItemAdvancedOptions,
     updateItemIntegrations,

apps/nextjs/src/components/board/layout/README.md

@@ -2,16 +2,17 @@
 
 The board uses fixed logical units:
 
-- one grid track has a `212 × 212` logical-pixel footprint;
-- cards are inset by `10` visual pixels on every side, matching the legacy GridStack gutter;
-- multi-cell items occupy complete track footprints (`2 × 1` is `424 × 212` before the card inset);
+- one `1 × 1` item is exactly `200 × 200` logical pixels;
+- the gap matches Mantine's `sm` spacing at `12` logical pixels, giving a `212` pixel track pitch;
+- multi-cell items include the gaps between their cells (`2 × 1` is `412 × 200`);
 - the canvas is zoomed once with one uniform scale derived from its available width.
 
-Grid footprints keep the same logical dimensions at every viewport. Widget cards
-use a scale-compensated inset so their painted size and content measurements
-match the legacy responsive grid. The visual canvas always fits the available
-width, every root lane keeps at least one viewport of height, and edit-mode
-previews extend it downward as needed.
+Items keep the same logical dimensions at every viewport. The viewport reserves
+the painted size while the inner canvas remains at its logical dimensions, so a
+widget's `clientWidth`, `clientHeight`, and `ResizeObserver` measurements stay
+stable. The visual canvas always fits the available width, every root lane
+keeps at least one viewport of height, and edit-mode previews extend it downward
+as needed.
 
 The read-only renderer should:
 

apps/nextjs/src/components/board/layout/board-lanes.ts

@@ -2,7 +2,7 @@ import type { BoardLane } from "@homarr/definitions";
 import { getBoardLaneColumnCount, getRootSectionLane } from "@homarr/definitions";
 
 import type { Board, EmptySection } from "~/app/[locale]/boards/_types";
-import { getLogicalGridSize, getLayoutRowCount, normalizeGridPlacement } from "./geometry";
+import { getLogicalTrackSize, getLayoutRowCount, normalizeGridPlacement } from "./geometry";
 import { getCollapsedDisplayLayout } from "./reflow";
 import type { GridPlacement } from "./types";
 
@@ -90,5 +90,5 @@ export const getInitialBoardLogicalHeight = (board: Board, layoutId: string) =>
     return [getLayoutRowCount(displayPlacements)];
   });
 
-  return getLogicalGridSize(Math.max(0, ...rowCounts));
+  return getLogicalTrackSize(Math.max(0, ...rowCounts));
 };

apps/nextjs/src/components/board/layout/geometry.ts

@@ -10,23 +10,12 @@ export const getLogicalTrackSize = (trackCount: number) => {
   return normalizedTrackCount * LOGICAL_GRID_CELL_SIZE + (normalizedTrackCount - 1) * LOGICAL_GRID_GAP;
 };
 
-/**
- * Returns the complete footprint occupied by grid tracks. Cards are inset
- * inside this footprint so their visual gutters stay fixed while the canvas
- * is scaled.
- */
-export const getLogicalGridSize = (trackCount: number) => {
-  const normalizedTrackCount = Math.max(0, toFiniteNumber(trackCount, "trackCount"));
-
-  return normalizedTrackCount * LOGICAL_GRID_PITCH;
-};
-
 export const getLogicalItemStyle = ({ x, y, w, h }: GridCoordinates): CSSProperties => ({
   position: "absolute",
   left: x * LOGICAL_GRID_PITCH,
   top: y * LOGICAL_GRID_PITCH,
-  width: getLogicalGridSize(w),
-  height: getLogicalGridSize(h),
+  width: getLogicalTrackSize(w),
+  height: getLogicalTrackSize(h),
 });
 
 export const getLayoutRowCount = (placements: readonly GridCoordinates[]) =>
@@ -36,7 +25,7 @@ export const getGridRowCountForVisualHeight = (visualHeight: number, visualScale
   if (!Number.isFinite(visualHeight) || visualHeight <= 0) return 1;
   if (!Number.isFinite(visualScale) || visualScale <= 0) return 1;
 
-  return Math.max(1, Math.ceil(visualHeight / visualScale / LOGICAL_GRID_PITCH));
+  return Math.max(1, Math.ceil((visualHeight / visualScale + LOGICAL_GRID_GAP) / LOGICAL_GRID_PITCH));
 };
 
 export const normalizeGridPlacement = <TPlacement extends GridPlacement>(

apps/nextjs/src/components/board/layout/test/board-lanes.spec.ts

@@ -8,7 +8,7 @@ import { ItemMockBuilder } from "~/components/board/items/actions/test/mocks/ite
 import {
   getBoardLaneColumnCount,
   getInitialBoardLogicalHeight,
-  getLogicalGridSize,
+  getLogicalTrackSize,
   getRootSectionForLane,
 } from "../index";
 
@@ -131,6 +131,6 @@ describe("board lanes", () => {
       },
     ];
 
-    expect(getInitialBoardLogicalHeight(board, layoutId)).toBe(getLogicalGridSize(4));
+    expect(getInitialBoardLogicalHeight(board, layoutId)).toBe(getLogicalTrackSize(4));
   });
 });

apps/nextjs/src/components/board/layout/test/geometry.spec.ts

@@ -3,28 +3,24 @@ import { describe, expect, test } from "vitest";
 import {
   getGridRowCountForVisualHeight,
   getLayoutRowCount,
-  getLogicalGridSize,
   getLogicalItemStyle,
   getLogicalTrackSize,
   normalizeGridPlacement,
 } from "../index";
 
 describe("fixed dashboard geometry", () => {
-  test("separates content track sizes from complete grid footprints", () => {
+  test("keeps a 1x1 item exactly 200px with a fixed 12px gap", () => {
     expect(getLogicalTrackSize(1)).toBe(200);
     expect(getLogicalTrackSize(0.5)).toBe(94);
     expect(getLogicalTrackSize(2)).toBe(412);
     expect(getLogicalTrackSize(3)).toBe(624);
-    expect(getLogicalGridSize(1)).toBe(212);
-    expect(getLogicalGridSize(2)).toBe(424);
-    expect(getLogicalGridSize(3)).toBe(636);
 
     expect(getLogicalItemStyle({ x: 1, y: 2, w: 2, h: 3 })).toEqual({
       position: "absolute",
       left: 212,
       top: 424,
-      width: 424,
-      height: 636,
+      width: 412,
+      height: 624,
     });
   });
 

apps/nextjs/src/components/board/sections/grid/dnd/coordinates.ts

@@ -1,4 +1,4 @@
-import { getLogicalGridSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
+import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
 import type { GridPlacement } from "~/components/board/layout";
 import type { GridResizeDirection } from "./types";
 
@@ -38,7 +38,7 @@ export const getSnappedGridCoordinates = ({
   target: RectangleLike;
   columnCount: number;
 }) => {
-  const logicalWidth = getLogicalGridSize(columnCount);
+  const logicalWidth = getLogicalTrackSize(columnCount);
   const visualScale = logicalWidth > 0 ? target.width / logicalWidth : 0;
   if (!Number.isFinite(visualScale) || visualScale <= 0) return null;
 

apps/nextjs/src/components/board/sections/grid/grid-editor.tsx

@@ -39,7 +39,7 @@ import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 import { getWidgetName } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
 
-import { getLogicalGridSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
+import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
 import {
   beginGridTransaction,
   cancelGridTransaction,
@@ -792,8 +792,8 @@ export default function GridEditor({
       data-grid-depth={depth}
       style={
         {
-          width: getLogicalGridSize(columnCount),
-          height: getLogicalGridSize(rowCount),
+          width: getLogicalTrackSize(columnCount),
+          height: getLogicalTrackSize(rowCount),
           "--board-grid-pitch": `${LOGICAL_GRID_PITCH}px`,
         } as CSSProperties
       }
@@ -1234,8 +1234,8 @@ const getEntryVisualScale = (element: HTMLElement | null, placement: SectionGrid
   if (!element) return null;
   const rectangle = element.getBoundingClientRect();
   const scale = {
-    x: rectangle.width / getLogicalGridSize(placement.w),
-    y: rectangle.height / getLogicalGridSize(placement.h),
+    x: rectangle.width / getLogicalTrackSize(placement.w),
+    y: rectangle.height / getLogicalTrackSize(placement.h),
   };
   return Number.isFinite(scale.x) && scale.x > 0 && Number.isFinite(scale.y) && scale.y > 0 ? scale : null;
 };

apps/nextjs/src/components/board/sections/grid/grid-preview-geometry.ts

@@ -1,4 +1,4 @@
-import { getLogicalGridSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
+import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
 import type { GridPlacement } from "~/components/board/layout";
 
 export interface GridPreviewDomState {
@@ -75,8 +75,8 @@ export const clearGridPreviewGeometry = (
 const applyPreviewGeometry = (element: HTMLElement, controlled: GridPlacement, preview: GridPlacement) => {
   element.style.setProperty("--board-grid-preview-x", `${(preview.x - controlled.x) * LOGICAL_GRID_PITCH}px`);
   element.style.setProperty("--board-grid-preview-y", `${(preview.y - controlled.y) * LOGICAL_GRID_PITCH}px`);
-  element.style.setProperty("--board-grid-preview-width", `${getLogicalGridSize(preview.w)}px`);
-  element.style.setProperty("--board-grid-preview-height", `${getLogicalGridSize(preview.h)}px`);
+  element.style.setProperty("--board-grid-preview-width", `${getLogicalTrackSize(preview.w)}px`);
+  element.style.setProperty("--board-grid-preview-height", `${getLogicalTrackSize(preview.h)}px`);
   element.setAttribute("data-grid-preview", "true");
   setPlacementAttributes(element, preview);
 };

apps/nextjs/src/components/board/sections/grid/grid-preview-layer.tsx

@@ -3,7 +3,7 @@
 import type { RefObject } from "react";
 import { useCallback, useLayoutEffect, useRef, useSyncExternalStore } from "react";
 
-import { getLayoutRowCount, getLogicalItemStyle, getLogicalGridSize } from "~/components/board/layout";
+import { getLayoutRowCount, getLogicalItemStyle, getLogicalTrackSize } from "~/components/board/layout";
 import type { TransactionalGridState } from "./dnd";
 import type { GridInteractionStore } from "./grid-interaction-store";
 import { clearGridPreviewGeometry, createGridPreviewDomState, syncGridPreviewGeometry } from "./grid-preview-geometry";
@@ -87,7 +87,7 @@ export const GridPreviewLayer = ({
     } else {
       delete grid.dataset.dndPreviewRevision;
     }
-    grid.style.height = `${getLogicalGridSize(renderedRowCount)}px`;
+    grid.style.height = `${getLogicalTrackSize(renderedRowCount)}px`;
 
     const viewport = grid.parentElement;
     if (viewport?.hasAttribute("data-section-id")) {
@@ -98,7 +98,7 @@ export const GridPreviewLayer = ({
       // stray value would silently blow the cap open for the rest of the session, well after any
       // drag ended, since nothing else would ever clear it back out.
       if (maxRowCount === null) {
-        viewport.style.setProperty("--board-grid-drag-height", `${getLogicalGridSize(renderedRowCount)}px`);
+        viewport.style.setProperty("--board-grid-drag-height", `${getLogicalTrackSize(renderedRowCount)}px`);
       } else {
         viewport.style.removeProperty("--board-grid-drag-height");
       }

apps/nextjs/src/components/board/sections/grid/grid-resize-outline.ts

@@ -1,4 +1,4 @@
-import { getLogicalGridSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
+import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
 import type { GridPlacement } from "~/components/board/layout";
 
 interface ResizeOutlinePreview {
@@ -31,8 +31,8 @@ export const createGridResizeOutlineController = (
     outline.style.position = "absolute";
     outline.style.left = `${(preview.placement.x - visualX) * LOGICAL_GRID_PITCH}px`;
     outline.style.top = `${(preview.placement.y - visualY) * LOGICAL_GRID_PITCH}px`;
-    outline.style.width = `${getLogicalGridSize(preview.placement.w)}px`;
-    outline.style.height = `${getLogicalGridSize(preview.placement.h)}px`;
+    outline.style.width = `${getLogicalTrackSize(preview.placement.w)}px`;
+    outline.style.height = `${getLogicalTrackSize(preview.placement.h)}px`;
     outline.dataset.gridResizeValid = String(preview.valid);
   };
 

apps/nextjs/src/components/board/sections/grid/section-grid.module.css

@@ -50,10 +50,6 @@
   overflow: visible;
 }
 
-.staticItem[data-type="item"] > .contentMount {
-  inset: calc(10px * var(--board-canvas-inverse-scale, 1));
-}
-
 .staticItem:has([data-board-container-label]) {
   z-index: 2;
 }

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

@@ -14,7 +14,7 @@ import {
   getEditableCanvasAttributes,
   getGridRowCountForVisualHeight,
   getLayoutRowCount,
-  getLogicalGridSize,
+  getLogicalTrackSize,
   getReadonlyCanvasAttributes,
   normalizeGridPlacement,
 } from "~/components/board/layout";
@@ -138,9 +138,9 @@ export const SectionGrid = ({
   // of expanding to fit every widget, so its viewport height is capped independently of rowCount.
   const isScrollableContainer = section.kind === "container" && section.options.scrollable;
   const viewportRowCount = isScrollableContainer ? Math.max(requestedRowCount, 1) : rowCount;
-  const logicalWidth = getLogicalGridSize(columnCount);
-  const logicalHeight = getLogicalGridSize(rowCount);
-  const viewportHeight = getLogicalGridSize(viewportRowCount);
+  const logicalWidth = getLogicalTrackSize(columnCount);
+  const logicalHeight = getLogicalTrackSize(rowCount);
+  const viewportHeight = getLogicalTrackSize(viewportRowCount);
   // A collapsed container's compact coordinates are display-only. Its own
   // nested grid stays inactive until an explicit edit interaction expands it.
   const isInteractionDisabled = section.kind === "container" && collapsedSectionIds.has(section.id);

apps/nextjs/src/components/board/sections/grid/test/fixed-grid-item.spec.ts

@@ -4,7 +4,7 @@ import { createRoot } from "react-dom/client";
 import type { Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 
-import { getCollapsedDisplayLayout, getLogicalGridSize } from "../../../layout";
+import { getCollapsedDisplayLayout, LOGICAL_GRID_CELL_SIZE } from "../../../layout";
 import { FixedGridItem } from "../fixed-grid-item";
 
 const mocks = vi.hoisted(() => ({
@@ -250,14 +250,14 @@ describe("fixed grid item behavior", () => {
     expect(container.querySelector('[data-testid="board-grid-drag-affordance"]')).toBeNull();
   });
 
-  test("renders a view-only 1x1 card at the complete grid footprint", () => {
+  test("renders a view-only 1x1 card at the fixed 200px logical size", () => {
     mocks.editMode = false;
     renderWeather(root);
 
     const item = container.querySelector<HTMLElement>('[data-grid-id="weather"]');
     expect(item).not.toBeNull();
-    expect(item?.style.width).toBe(`${getLogicalGridSize(1)}px`);
-    expect(item?.style.height).toBe(`${getLogicalGridSize(1)}px`);
+    expect(item?.style.width).toBe(`${LOGICAL_GRID_CELL_SIZE}px`);
+    expect(item?.style.height).toBe(`${LOGICAL_GRID_CELL_SIZE}px`);
     expect(item?.getAttribute("role")).toBeNull();
 
     act(() => item?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true })));

apps/nextjs/src/components/board/sections/grid/test/grid-preview-geometry.spec.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, test } from "vitest";
 
-import { getLogicalGridSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
+import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
 
 import { createGridPreviewDomState, syncGridPreviewGeometry } from "../grid-preview-geometry";
 
@@ -65,8 +65,8 @@ describe("grid preview geometry", () => {
     expect(active?.getAttribute("data-grid-preview")).toBe("true");
     expect(active?.style.getPropertyValue("--board-grid-preview-x")).toBe(`${LOGICAL_GRID_PITCH}px`);
     expect(active?.style.getPropertyValue("--board-grid-preview-y")).toBe(`${LOGICAL_GRID_PITCH}px`);
-    expect(active?.style.getPropertyValue("--board-grid-preview-width")).toBe(`${getLogicalGridSize(3)}px`);
-    expect(active?.style.getPropertyValue("--board-grid-preview-height")).toBe(`${getLogicalGridSize(4)}px`);
+    expect(active?.style.getPropertyValue("--board-grid-preview-width")).toBe(`${getLogicalTrackSize(3)}px`);
+    expect(active?.style.getPropertyValue("--board-grid-preview-height")).toBe(`${getLogicalTrackSize(4)}px`);
     expect(active?.dataset.gridW).toBe("3");
     expect(active?.dataset.gridH).toBe("4");
   });

apps/nextjs/src/components/board/sections/grid/test/grid-resize-outline.spec.ts

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, test, vi } from "vitest";
 
-import { getLogicalGridSize } from "~/components/board/layout";
+import { getLogicalTrackSize } from "~/components/board/layout";
 
 import { createGridResizeOutlineController } from "../grid-resize-outline";
 
@@ -30,8 +30,8 @@ describe("grid resize outline", () => {
     const outline = shell.querySelector<HTMLElement>("[data-grid-resize-outline]");
     expect(outline?.style.left).toBe("0px");
     expect(outline?.style.top).toBe("0px");
-    expect(outline?.style.width).toBe(`${getLogicalGridSize(1)}px`);
-    expect(outline?.style.height).toBe(`${getLogicalGridSize(2)}px`);
+    expect(outline?.style.width).toBe(`${getLogicalTrackSize(1)}px`);
+    expect(outline?.style.height).toBe(`${getLogicalTrackSize(2)}px`);
     expect(outline?.dataset.gridResizeValid).toBe("false");
 
     controller.schedule(null);

packages/api/src/router/board.ts

@@ -86,7 +86,6 @@ interface BoardItemPlacementRectangle {
 
 const boardItemPlacementTails = new Map<string, Promise<void>>();
 const maxManageOverviewPreviewRows = 12;
-const manageOverviewInputSchema = z.object({ fullPreview: z.boolean().default(false) }).optional();
 
 const serializeBoardItemPlacementAsync = async <T>(boardId: string, operation: () => Promise<T>) => {
   const previous = boardItemPlacementTails.get(boardId) ?? Promise.resolve();
@@ -226,7 +225,7 @@ export const boardRouter = createTRPCRouter({
         isMobileHome: currentUser?.mobileHomeBoardId === board.id,
       }));
     }),
-  getManageOverview: publicProcedure.input(manageOverviewInputSchema).query(async ({ ctx, input }) => {
+  getManageOverview: publicProcedure.query(async ({ ctx }) => {
     const userId = ctx.session?.user.id;
     const { boardIds, currentUser, groupMemberships } = await getBoardAccessContextAsync(ctx.db, userId);
     const groupPermissionWhere = getBoardGroupPermissionWhere(groupMemberships);
@@ -307,7 +306,7 @@ export const boardRouter = createTRPCRouter({
                 inArray(itemLayouts.sectionId, rootSectionIds),
                 gte(itemLayouts.xOffset, 0),
                 gte(itemLayouts.yOffset, 0),
-                input?.fullPreview ? undefined : lt(itemLayouts.yOffset, maxManageOverviewPreviewRows),
+                lt(itemLayouts.yOffset, maxManageOverviewPreviewRows),
                 gt(itemLayouts.width, 0),
                 gt(itemLayouts.height, 0),
               ),
@@ -332,7 +331,7 @@ export const boardRouter = createTRPCRouter({
                 inArray(sectionLayouts.parentSectionId, rootSectionIds),
                 gte(sectionLayouts.xOffset, 0),
                 gte(sectionLayouts.yOffset, 0),
-                input?.fullPreview ? undefined : lt(sectionLayouts.yOffset, maxManageOverviewPreviewRows),
+                lt(sectionLayouts.yOffset, maxManageOverviewPreviewRows),
                 gt(sectionLayouts.width, 0),
                 gt(sectionLayouts.height, 0),
               ),
@@ -367,7 +366,7 @@ export const boardRouter = createTRPCRouter({
               inArray(itemLayouts.sectionId, previewContainerSectionIds),
               gte(itemLayouts.xOffset, 0),
               gte(itemLayouts.yOffset, 0),
-              input?.fullPreview ? undefined : lt(itemLayouts.yOffset, maxManageOverviewPreviewRows),
+              lt(itemLayouts.yOffset, maxManageOverviewPreviewRows),
               gt(itemLayouts.width, 0),
               gt(itemLayouts.height, 0),
             ),

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

@@ -337,7 +337,7 @@ describe("getManageOverview", () => {
     expect(overview.map((board) => board.id)).not.toContain(hiddenBoardId);
   });
 
-  test("returns compact previews by default and full previews on request", async () => {
+  test("returns one compact base-layout preview for each accessible board", async () => {
     const db = createDb();
     const caller = boardRouter.createCaller({ db, deviceType: undefined, session: defaultSession });
     const boardId = createId();
@@ -487,10 +487,6 @@ describe("getManageOverview", () => {
     expect(result[0]?.preview?.layouts).toHaveLength(1);
     expect(result[0]?.preview?.items.map((item) => item.id)).toEqual([itemId, nestedItemId]);
     expect(result[0]?.preview?.sections).toHaveLength(2);
-
-    const fullResult = await caller.getManageOverview({ fullPreview: true });
-
-    expect(fullResult[0]?.preview?.items.map((item) => item.id)).toEqual([itemId, offscreenItemId, nestedItemId]);
   });
 
   test("includes app and widget icons in compact previews", async () => {

packages/boards/src/context.tsx

@@ -10,16 +10,12 @@ import { clientApi } from "@homarr/api/client";
 import { boardViewportWidthCookieName, getLayoutIdForViewportWidth } from "./layout-selection";
 import { updateBoardName } from "./updater";
 
-type Board = RouterOutputs["board"]["getBoardByName"];
-
-interface BoardContextValue {
-  board: Board;
+const BoardContext = createContext<{
+  board: RouterOutputs["board"]["getBoardByName"];
   layoutOverrideId: string | null;
   currentLayout: string;
   initialViewportWidth: number;
-}
-
-const BoardContext = createContext<BoardContextValue | null>(null);
+} | null>(null);
 
 const subscribeToViewport = (onStoreChange: () => void) => {
   if (typeof window === "undefined") return () => undefined;
@@ -41,23 +37,6 @@ const subscribeToViewport = (onStoreChange: () => void) => {
   };
 };
 
-export const BoardPreviewProvider = ({ children, board }: PropsWithChildren<{ board: Board }>) => {
-  const currentLayout = board.layouts[0]?.id ?? "";
-
-  return (
-    <BoardContext.Provider
-      value={{
-        board,
-        layoutOverrideId: null,
-        currentLayout,
-        initialViewportWidth: 0,
-      }}
-    >
-      {children}
-    </BoardContext.Provider>
-  );
-};
-
 export const BoardProvider = ({
   children,
   initialBoard,

packages/translation/src/lang/en.json

@@ -2083,12 +2083,10 @@
           "label": "Section or rail"
         },
         "width": {
-          "label": "Width",
-          "shortLabel": "W"
+          "label": "Width"
         },
         "height": {
-          "label": "Height",
-          "shortLabel": "H"
+          "label": "Height"
         },
         "xOffset": {
           "label": "X offset"
@@ -2117,13 +2115,6 @@
         "loading": "Loading integration",
         "loadError": "This integration could not be loaded. Try again before changing its connection settings."
       },
-      "preview": {
-        "integrationRequired": "Choose a connection to preview this widget.",
-        "size": "Size"
-      },
-      "settings": {
-        "label": "Widget settings"
-      },
       "advancedOptions": {
         "label": "Advanced options",
         "title": "Advanced item options"

packages/widgets/package.json

@@ -30,8 +30,7 @@
     "./widget-integration-select": "./src/widget-integration-select.tsx",
     "./modals": "./src/modals/index.ts",
     "./prefetch": "./src/prefetch.ts",
-    "./refetch-intervals": "./src/refetch-intervals.ts",
-    "./widget-card-shell": "./src/widget-card-shell.tsx"
+    "./refetch-intervals": "./src/refetch-intervals.ts"
   },
   "scripts": {
     "clean": "rm -rf .turbo node_modules",

packages/widgets/src/modals/widget-edit-modal.module.css

@@ -1,191 +0,0 @@
-.workspace {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--mantine-spacing-lg);
-  align-items: start;
-}
-
-.workspace[data-with-preview][data-with-settings] {
-  grid-template-columns: minmax(0, 3fr) auto minmax(34rem, 2fr);
-}
-
-.previewPanel {
-  position: sticky;
-  top: 0;
-  width: 100%;
-  max-width: 52rem;
-  min-width: 0;
-  justify-self: center;
-}
-
-.previewDimensions {
-  position: absolute;
-  z-index: 2;
-  top: var(--mantine-spacing-xs);
-  right: var(--mantine-spacing-xs);
-  pointer-events: none;
-}
-
-.previewSizeControls {
-  position: absolute;
-  z-index: 3;
-  top: var(--mantine-spacing-xs);
-  left: var(--mantine-spacing-xs);
-  padding: 0.25rem 0.375rem;
-  border: 1px solid var(--mantine-color-default-border);
-  border-radius: var(--mantine-radius-sm);
-  background: color-mix(in srgb, var(--mantine-color-body) 92%, transparent);
-  box-shadow: var(--mantine-shadow-xs);
-  backdrop-filter: blur(8px);
-}
-
-.previewSizeInput {
-  width: 5rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.previewCanvas {
-  position: relative;
-  width: 100%;
-  height: clamp(24rem, calc(100dvh - 17rem), 44rem);
-  padding: var(--mantine-spacing-lg);
-  overflow: hidden;
-  border: 1px solid var(--mantine-color-default-border);
-  border-radius: var(--mantine-radius-md);
-  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8));
-  background-image:
-    linear-gradient(to right, color-mix(in srgb, var(--mantine-color-dimmed) 14%, transparent) 1px, transparent 1px),
-    linear-gradient(to bottom, color-mix(in srgb, var(--mantine-color-dimmed) 14%, transparent) 1px, transparent 1px);
-  background-size: 2rem 2rem;
-}
-
-.previewDivider {
-  height: auto;
-  align-self: stretch;
-}
-
-.previewViewport {
-  position: relative;
-  flex: 0 0 auto;
-  animation: dock-widget 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
-}
-
-.previewWidget {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform-origin: top left;
-}
-
-.previewContent {
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  user-select: none;
-}
-
-.settingsPanel {
-  min-width: 0;
-  max-height: calc(100dvh - 13rem);
-  padding-right: 0.25rem;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-}
-
-.settingsForm {
-  min-width: 0;
-}
-
-.fullWidthField {
-  grid-column: 1 / -1;
-}
-
-.switchOption {
-  display: flex;
-  cursor: pointer;
-  height: 4.5rem;
-  align-items: center;
-  padding: 0.625rem 0.75rem;
-  border: 1px solid var(--mantine-color-default-border);
-  border-radius: var(--mantine-radius-sm);
-  background: var(--mantine-color-body);
-}
-
-.switchOption > *,
-.switchOption :global(.mantine-Switch-root),
-.switchOption :global(.mantine-Switch-body) {
-  width: 100%;
-}
-
-.switchOption :global(.mantine-Switch-body) {
-  flex-direction: row-reverse;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--mantine-spacing-md);
-}
-
-.switchOption :global(.mantine-Switch-labelWrapper) {
-  min-width: 0;
-  flex: 1;
-}
-
-.switchOption :global(.mantine-Switch-description) {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.footer {
-  position: sticky;
-  z-index: 3;
-  bottom: calc(var(--mantine-spacing-md) * -1);
-  margin-inline: calc(var(--mantine-spacing-md) * -1);
-  margin-bottom: calc(var(--mantine-spacing-md) * -1);
-  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
-  border-top: 1px solid var(--mantine-color-default-border);
-  background: color-mix(in srgb, var(--mantine-color-body) 94%, transparent);
-  backdrop-filter: blur(10px);
-}
-
-@keyframes dock-widget {
-  from {
-    opacity: 0;
-    transform: translate(-1.25rem, 1rem) scale(0.92);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-@media (max-width: 68em) {
-  .workspace[data-with-preview][data-with-settings] {
-    grid-template-columns: 1fr;
-  }
-
-  .previewPanel {
-    position: static;
-    max-width: 44rem;
-  }
-
-  .previewDivider {
-    display: none;
-  }
-
-  .previewCanvas {
-    height: 24rem;
-  }
-
-  .settingsPanel {
-    max-height: none;
-    overflow: visible;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .previewViewport {
-    animation: none;
-  }
-}

packages/widgets/src/modals/widget-edit-modal.tsx

@@ -1,38 +1,18 @@
 "use client";
 
-/* eslint-disable react/no-unstable-nested-components -- Widget modules and definition-bound fallbacks are loaded dynamically. */
-
-import { useEffect, useId, useRef, useState } from "react";
-import type { ComponentType, FormEvent, PropsWithChildren } from "react";
-import {
-  Alert,
-  Badge,
-  Box,
-  Button,
-  Center,
-  Divider,
-  Group,
-  NumberInput,
-  SimpleGrid,
-  Stack,
-  Tabs,
-  Text,
-  Tooltip,
-} from "@mantine/core";
+import { useEffect, useRef, useState } from "react";
+import type { ComponentType, FormEvent } from "react";
+import { Box, Button, Group, Stack, Tabs, Text } from "@mantine/core";
 import { schemaResolver } from "@mantine/form";
-import { useElementSize } from "@mantine/hooks";
-import { IconArrowLeft, IconEye, IconPencil, IconSettings } from "@tabler/icons-react";
-import { QueryErrorResetBoundary } from "@tanstack/react-query";
-import { ErrorBoundary } from "react-error-boundary";
+import { IconArrowLeft, IconPencil } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
 import { objectEntries } from "@homarr/common";
-import { IntegrationProvider, useSession } from "@homarr/auth/client";
+import { useSession } from "@homarr/auth/client";
 import { useOptionalBoard } from "@homarr/boards/context";
 import type { WidgetKind } from "@homarr/definitions";
-import { createModal, modalSizeForm, useModalAction } from "@homarr/modals";
+import { createModal, ModalFormFooter, modalSizeForm, useModalAction } from "@homarr/modals";
 import type { SettingsContextProps } from "@homarr/settings/creator";
-import { SpotlightProvider } from "@homarr/spotlight";
 import { useI18n } from "@homarr/translation/client";
 import { IntegrationAvatar } from "@homarr/ui";
 import { zodErrorMap } from "@homarr/validation/form/i18n";
@@ -41,16 +21,13 @@ import { getInputForType } from "../_inputs";
 import { FormProvider, useForm } from "../_inputs/form";
 import type { BoardItemAdvancedOptions } from "../../../validation/src/shared";
 import type { OptionsBuilderResult } from "../options";
-import type { WidgetComponentProps, WidgetDefinition } from "../definition";
-import { WidgetError } from "../errors/component";
+import type { WidgetDefinition } from "../definition";
 import { OPTIONS_SUPER_REFINE } from "../options";
 import type { IntegrationSelectOption } from "../widget-integration-select";
 import { WidgetIntegrationSelect } from "../widget-integration-select";
-import { WidgetCardShell, WidgetTitleBadge } from "../widget-card-shell";
 import { WidgetAdvancedOptionsModal } from "./widget-advanced-options-modal";
 import type { EmbeddedAppEditFormHandle } from "./embedded-app-edit-form";
 import { EmbeddedAppEditForm } from "./embedded-app-edit-form";
-import classes from "./widget-edit-modal.module.css";
 
 export interface WidgetEditModalState {
   options: Record<string, unknown>;
@@ -58,17 +35,6 @@ export interface WidgetEditModalState {
   advancedOptions: BoardItemAdvancedOptions;
 }
 
-export interface WidgetEditModalSize {
-  width: number;
-  height: number;
-}
-
-interface WidgetEditPreviewResizeOptions {
-  initialSize: WidgetEditModalSize;
-  maximumSize: WidgetEditModalSize;
-  getDimensions?: (size: WidgetEditModalSize) => { width: number; height: number; scale?: number };
-}
-
 export interface EmbeddedIntegrationEditFormHandle {
   submitIfDirty: () => Promise<boolean>;
 }
@@ -83,7 +49,7 @@ export interface WidgetEditModalProps<TSort extends WidgetKind> {
   kind: TSort;
   definition: WidgetDefinition;
   value: WidgetEditModalState;
-  onSuccessfulEdit: (value: WidgetEditModalState, size?: WidgetEditModalSize) => void;
+  onSuccessfulEdit: (value: WidgetEditModalState) => void;
   integrationData: IntegrationSelectOption[];
   integrationSupport: boolean;
   settings: SettingsContextProps;
@@ -93,215 +59,8 @@ export interface WidgetEditModalProps<TSort extends WidgetKind> {
   integrationEditForm?: ComponentType<EmbeddedIntegrationEditFormProps>;
   onIntegrationSaved?: () => void;
   onOpenNewIntegration?: (onCreated?: (id: string) => void) => void;
-  previewComponent?: ComponentType<WidgetComponentProps<TSort>>;
-  previewDimensions?: { width: number; height: number; scale?: number };
-  previewResize?: WidgetEditPreviewResizeOptions;
-  previewWrapper?: ComponentType<PropsWithChildren>;
 }
 
-interface WidgetEditPreviewProps {
-  kind: WidgetKind;
-  Component: ComponentType<WidgetComponentProps<WidgetKind>>;
-  definition: WidgetDefinition;
-  state: WidgetEditModalState;
-  itemId?: string;
-  boardId?: string;
-  dimensions?: { width: number; height: number; scale?: number };
-  integrationData: IntegrationSelectOption[];
-  onChangeOptions: (newOptions: Record<string, unknown>) => void;
-  resize?: {
-    size: WidgetEditModalSize;
-    maximumSize: WidgetEditModalSize;
-    onChange: (size: WidgetEditModalSize) => void;
-  };
-  PreviewWrapper?: ComponentType<PropsWithChildren>;
-}
-
-const PreviewRuntimeBoundary = ({
-  Wrapper,
-  children,
-}: PropsWithChildren<{ Wrapper?: ComponentType<PropsWithChildren> }>) => {
-  if (!Wrapper) return children;
-  return <Wrapper>{children}</Wrapper>;
-};
-
-const normalizePreviewSize = (size: WidgetEditModalSize, maximumSize: WidgetEditModalSize): WidgetEditModalSize => ({
-  width: Math.max(1, Math.min(Math.round(size.width), maximumSize.width)),
-  height: Math.max(1, Math.min(Math.round(size.height), maximumSize.height)),
-});
-
-const WidgetEditPreview = ({
-  kind,
-  Component,
-  definition,
-  state,
-  itemId,
-  boardId,
-  dimensions = { width: 400, height: 240 },
-  integrationData,
-  onChangeOptions,
-  resize,
-  PreviewWrapper,
-}: WidgetEditPreviewProps) => {
-  const t = useI18n();
-  const tItem = useI18n("item.edit");
-  const board = useOptionalBoard();
-  const generatedPreviewId = useId().replaceAll(":", "");
-  const { ref, width: availableWidth, height: availableHeight } = useElementSize<HTMLDivElement>();
-  const sourceWidth = Math.max(dimensions.width, 1);
-  const sourceHeight = Math.max(dimensions.height, 1);
-  let maximumScale = dimensions.scale ?? 0.9;
-  if (!Number.isFinite(maximumScale) || maximumScale <= 0) maximumScale = 0.9;
-  maximumScale = Math.min(maximumScale, 0.9);
-  let previewScale = maximumScale;
-  if (availableWidth > 0 && availableHeight > 0) {
-    previewScale = Math.min(availableWidth / sourceWidth, availableHeight / sourceHeight, maximumScale);
-  }
-  const previewWidth = sourceWidth * previewScale;
-  const previewHeight = sourceHeight * previewScale;
-
-  const hasIntegrationSupport = "supportedIntegrations" in definition;
-  const integrationRequired = hasIntegrationSupport && definition.integrationsRequired !== false;
-  const isMissingIntegration = integrationRequired && state.integrationIds.length === 0;
-  const previewIntegrations = integrationData
-    .filter((integration) => state.integrationIds.includes(integration.id))
-    .map((integration) => ({
-      id: integration.id,
-      permissions: integration.permissions ?? {
-        hasFullAccess: false,
-        hasInteractAccess: false,
-        hasUseAccess: false,
-      },
-    }));
-  let componentItemId = itemId;
-  if (kind === "assistant") componentItemId = `widget-preview-${generatedPreviewId}`;
-  const isPendingCustomWidget = kind === "customApi" && !itemId;
-  const previewOpacity = (board?.opacity ?? 100) / 100;
-  const handleResizeValue = (dimension: keyof WidgetEditModalSize, value: string | number) => {
-    if (typeof value !== "number" || !Number.isFinite(value) || !resize) return;
-    resize.onChange(
-      normalizePreviewSize(
-        {
-          ...resize.size,
-          [dimension]: value,
-        },
-        resize.maximumSize,
-      ),
-    );
-  };
-
-  return (
-    <Stack className={classes.previewPanel} gap={0}>
-      <Center ref={ref} className={classes.previewCanvas}>
-        {resize && (
-          <Group className={classes.previewSizeControls} gap={6} wrap="nowrap">
-            <Text size="xs" fw={600} c="dimmed">
-              {tItem("preview.size")}
-            </Text>
-            <Tooltip label={t("item.moveResize.field.width.label")}>
-              <NumberInput
-                className={classes.previewSizeInput}
-                aria-label={t("item.moveResize.field.width.label")}
-                value={resize.size.width}
-                onChange={(value) => handleResizeValue("width", value)}
-                min={1}
-                max={resize.maximumSize.width}
-                step={1}
-                allowDecimal={false}
-                allowNegative={false}
-                clampBehavior="strict"
-                size="xs"
-                leftSection={t("item.moveResize.field.width.shortLabel")}
-                leftSectionPointerEvents="none"
-              />
-            </Tooltip>
-            <Text size="xs" c="dimmed" aria-hidden>
-              ×
-            </Text>
-            <Tooltip label={t("item.moveResize.field.height.label")}>
-              <NumberInput
-                className={classes.previewSizeInput}
-                aria-label={t("item.moveResize.field.height.label")}
-                value={resize.size.height}
-                onChange={(value) => handleResizeValue("height", value)}
-                min={1}
-                max={resize.maximumSize.height}
-                step={1}
-                allowDecimal={false}
-                allowNegative={false}
-                clampBehavior="strict"
-                size="xs"
-                leftSection={t("item.moveResize.field.height.shortLabel")}
-                leftSectionPointerEvents="none"
-              />
-            </Tooltip>
-          </Group>
-        )}
-        <Badge className={classes.previewDimensions} size="xs" variant="light" color="gray">
-          {Math.round(sourceWidth)} × {Math.round(sourceHeight)}
-        </Badge>
-        {isMissingIntegration ? (
-          <Alert color="gray" variant="light" icon={<IconEye size={18} />} maw={320}>
-            {tItem("preview.integrationRequired")}
-          </Alert>
-        ) : (
-          <Box className={classes.previewViewport} w={previewWidth} h={previewHeight}>
-            <WidgetCardShell
-              className={classes.previewWidget}
-              kind={kind}
-              advancedOptions={state.advancedOptions}
-              opacity={previewOpacity}
-              radius={board?.itemRadius}
-              w={sourceWidth}
-              h={sourceHeight}
-              p={0}
-              data-grid-item-content
-              style={{ transform: `scale(${previewScale})` }}
-            >
-              <WidgetTitleBadge
-                advancedOptions={state.advancedOptions}
-                opacity={previewOpacity}
-                radius={board?.itemRadius}
-              />
-              <QueryErrorResetBoundary>
-                {({ reset }) => (
-                  <ErrorBoundary
-                    onReset={reset}
-                    resetKeys={[state.options, state.integrationIds]}
-                    fallbackRender={({ resetErrorBoundary, error }) => (
-                      <WidgetError definition={definition} error={error} resetErrorBoundary={resetErrorBoundary} />
-                    )}
-                  >
-                    <PreviewRuntimeBoundary Wrapper={PreviewWrapper}>
-                      <SpotlightProvider>
-                        <IntegrationProvider integrations={previewIntegrations}>
-                          <div className={classes.previewContent} inert>
-                            <Component
-                              options={state.options as never}
-                              integrationIds={state.integrationIds}
-                              width={sourceWidth}
-                              height={sourceHeight}
-                              isEditMode={isPendingCustomWidget}
-                              displayMode="compact"
-                              boardId={boardId}
-                              itemId={componentItemId}
-                              setOptions={({ newOptions }) => onChangeOptions(newOptions as Record<string, unknown>)}
-                            />
-                          </div>
-                        </IntegrationProvider>
-                      </SpotlightProvider>
-                    </PreviewRuntimeBoundary>
-                  </ErrorBoundary>
-                )}
-              </QueryErrorResetBoundary>
-            </WidgetCardShell>
-          </Box>
-        )}
-      </Center>
-    </Stack>
-  );
-};
-
 export const getSelectedWidgetIntegrations = (
   integrationData: readonly IntegrationSelectOption[],
   selectedIds: readonly string[],
@@ -322,12 +81,6 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
   const [mountedIntegrationIds, setMountedIntegrationIds] = useState<string[]>([]);
   const [activeIntegrationId, setActiveIntegrationId] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [previewSize, setPreviewSize] = useState<WidgetEditModalSize | null>(() => {
-    const resize = innerProps.previewResize;
-    if (!resize) return null;
-    return normalizePreviewSize(resize.initialSize, resize.maximumSize);
-  });
-  const widgetFormId = useId();
 
   z.config({
     customError: zodErrorMap(t),
@@ -453,13 +206,10 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
         }
       }
 
-      innerProps.onSuccessfulEdit(
-        {
-          ...values,
-          advancedOptions,
-        },
-        previewSize ?? undefined,
-      );
+      innerProps.onSuccessfulEdit({
+        ...values,
+        advancedOptions,
+      });
       actions.closeModal();
     } finally {
       setIsSubmitting(false);
@@ -481,149 +231,47 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
       }
     : undefined;
 
-  const handlePreviewOptionsChange = (newOptions: Record<string, unknown>) => {
-    form.setFieldValue("options", {
-      ...form.values.options,
-      ...newOptions,
-    });
-  };
-
-  const selectedIntegrationKinds = innerProps.integrationData
-    .filter(({ id }) => form.values.integrationIds.includes(id))
-    .map(({ kind }) => kind);
-  const visibleOptions = Object.entries(options).filter(([, value]) => {
-    const Input = getInputForType(value.type);
-    if (!Input) {
-      return false;
-    }
-
-    return !value.shouldHide?.(form.values.options as never, selectedIntegrationKinds);
-  });
-  const switchOptions = visibleOptions.filter(([, value]) => value.type === "switch");
-  const otherOptions = visibleOptions.filter(([, value]) => value.type !== "switch");
-  const hasWidgetSettings = canConfigureWidget && (innerProps.integrationSupport || visibleOptions.length > 0);
-  const previewResize = innerProps.previewResize;
-  let previewDimensions = innerProps.previewDimensions;
-  let resizeControls: WidgetEditPreviewProps["resize"];
-  if (previewSize && previewResize?.getDimensions) {
-    previewDimensions = previewResize.getDimensions(previewSize);
-    resizeControls = {
-      size: previewSize,
-      maximumSize: previewResize.maximumSize,
-      onChange: setPreviewSize,
-    };
-  }
-
   const widgetFormContent = (
-    <Box
-      className={classes.workspace}
-      data-with-preview={innerProps.previewComponent ? true : undefined}
-      data-with-settings={hasWidgetSettings ? true : undefined}
-    >
-      {innerProps.previewComponent && (
-        <WidgetEditPreview
-          kind={innerProps.kind}
-          Component={innerProps.previewComponent}
-          definition={definition}
-          state={{ ...form.values, advancedOptions }}
-          itemId={innerProps.itemId}
-          boardId={innerProps.boardId ?? board?.id}
-          dimensions={previewDimensions}
-          integrationData={innerProps.integrationData}
-          onChangeOptions={handlePreviewOptionsChange}
-          resize={resizeControls}
-          PreviewWrapper={innerProps.previewWrapper}
+    <Stack>
+      {canConfigureWidget && innerProps.integrationSupport && (
+        <WidgetIntegrationSelect
+          label={tItem("field.integrations.label")}
+          data={innerProps.integrationData}
+          canSelectMultiple={maxIntegrations > 1}
+          withAsterisk={integrationsRequired}
+          onOpenNewIntegration={canCreateIntegration ? handleOpenNewIntegration : undefined}
+          {...form.getInputProps("integrationIds")}
         />
       )}
-      {innerProps.previewComponent && hasWidgetSettings && (
-        <Divider orientation="vertical" className={classes.previewDivider} />
-      )}
-      <form id={widgetFormId} className={classes.settingsForm} onSubmit={onFormSubmit} hidden={!hasWidgetSettings}>
-        {hasWidgetSettings && (
-          <Stack className={classes.settingsPanel} gap="sm">
-            <Group gap="xs" wrap="nowrap">
-              <IconSettings size={16} />
-              <Text fw={600} size="sm">
-                {tItem("settings.label")}
-              </Text>
-            </Group>
-            {canConfigureWidget && innerProps.integrationSupport && (
-              <Box className={classes.fullWidthField}>
-                <WidgetIntegrationSelect
-                  label={tItem("field.integrations.label")}
-                  data={innerProps.integrationData}
-                  canSelectMultiple={maxIntegrations > 1}
-                  withAsterisk={integrationsRequired}
-                  onOpenNewIntegration={canCreateIntegration ? handleOpenNewIntegration : undefined}
-                  {...form.getInputProps("integrationIds")}
-                />
-              </Box>
-            )}
-            {canConfigureWidget && (
-              <Stack gap="sm">
-                {switchOptions.length > 0 && (
-                  <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="sm" verticalSpacing="sm">
-                    {switchOptions.map(([key, value]) => {
-                      const Input = getInputForType(value.type);
-                      if (!Input) {
-                        return null;
-                      }
+      {canConfigureWidget &&
+        Object.entries(options).map(([key, value]) => {
+          const Input = getInputForType(value.type);
 
-                      return (
-                        <Box
-                          key={key}
-                          className={classes.switchOption}
-                          data-option-type={value.type}
-                          onClick={(event) => {
-                            const target = event.target;
-                            if (target instanceof Element && target.closest("label, input")) return;
-                            const input = event.currentTarget.querySelector<HTMLInputElement>("input[type=checkbox]");
-                            if (!input?.disabled) input?.click();
-                          }}
-                        >
-                          <Input
-                            kind={innerProps.kind}
-                            property={key}
-                            options={value as never}
-                            initialOptions={innerProps.value.options}
-                            itemId={innerProps.itemId}
-                            boardId={innerProps.boardId ?? board?.id}
-                          />
-                        </Box>
-                      );
-                    })}
-                  </SimpleGrid>
-                )}
-                {otherOptions.map(([key, value]) => {
-                  const Input = getInputForType(value.type);
-                  if (!Input) {
-                    return null;
-                  }
+          if (
+            !Input ||
+            value.shouldHide?.(
+              form.values.options as never,
+              innerProps.integrationData
+                .filter(({ id }) => form.values.integrationIds.includes(id))
+                .map(({ kind }) => kind),
+            )
+          ) {
+            return null;
+          }
 
-                  return (
-                    <Box key={key} data-option-type={value.type}>
-                      <Input
-                        kind={innerProps.kind}
-                        property={key}
-                        options={value as never}
-                        initialOptions={innerProps.value.options}
-                        itemId={innerProps.itemId}
-                        boardId={innerProps.boardId ?? board?.id}
-                      />
-                    </Box>
-                  );
-                })}
-              </Stack>
-            )}
-          </Stack>
-        )}
-      </form>
-    </Box>
-  );
-
-  const footer = (
-    <Box className={classes.footer}>
-      <Group justify="space-between" wrap="nowrap">
+          return (
+            <Input
+              key={key}
+              kind={innerProps.kind}
+              property={key}
+              options={value as never}
+              initialOptions={innerProps.value.options}
+              itemId={innerProps.itemId}
+              boardId={innerProps.boardId ?? board?.id}
+            />
+          );
+        })}
+      {showResourceTabs ? (
         <Button
           variant="subtle"
           type="button"
@@ -636,111 +284,143 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
         >
           {tItem("advancedOptions.label")}
         </Button>
-        <Group gap="xs" wrap="nowrap">
-          <Button onClick={actions.closeModal} variant="subtle" color="gray">
-            {tCommon("action.cancel")}
-          </Button>
-          <Button type="submit" form={widgetFormId} loading={isSubmitting}>
-            {tCommon("action.saveChanges")}
-          </Button>
-        </Group>
-      </Group>
-    </Box>
+      ) : (
+        <ModalFormFooter
+          onCancel={actions.closeModal}
+          leftSection={
+            <Button
+              variant="subtle"
+              type="button"
+              onClick={() =>
+                openModal({
+                  advancedOptions,
+                  onSuccess: setAdvancedOptions,
+                })
+              }
+            >
+              {tItem("advancedOptions.label")}
+            </Button>
+          }
+        />
+      )}
+    </Stack>
   );
 
   return (
-    <FormProvider form={form}>
-      <Stack gap="sm">
+    <form onSubmit={onFormSubmit}>
+      <FormProvider form={form}>
         {showResourceTabs ? (
-          <Tabs value={activeTab} onChange={setActiveTab}>
-            <Tabs.List grow>
-              <Tabs.Tab value="widget">{tItem("tab.widget")}</Tabs.Tab>
-              {showAppTab && <Tabs.Tab value="app">{tItem("tab.app")}</Tabs.Tab>}
-              {showIntegrationTab && <Tabs.Tab value="integration">{tItem("tab.integration")}</Tabs.Tab>}
-            </Tabs.List>
-            <Tabs.Panel value="widget" pt="sm">
-              {widgetFormContent}
-            </Tabs.Panel>
-            {showAppTab && (
-              <Tabs.Panel value="app" pt="sm">
-                {appId && <EmbeddedAppEditForm appId={appId} handleRef={appEditRef} />}
+          <Stack>
+            <Tabs value={activeTab} onChange={setActiveTab}>
+              <Tabs.List grow>
+                <Tabs.Tab value="widget">{tItem("tab.widget")}</Tabs.Tab>
+                {showAppTab && <Tabs.Tab value="app">{tItem("tab.app")}</Tabs.Tab>}
+                {showIntegrationTab && <Tabs.Tab value="integration">{tItem("tab.integration")}</Tabs.Tab>}
+              </Tabs.List>
+              <Tabs.Panel value="widget" pt="md">
+                {widgetFormContent}
               </Tabs.Panel>
-            )}
-            {showIntegrationTab && (
-              <Tabs.Panel value="integration" pt="sm">
-                <Stack>
-                  {displayedIntegrationId === null && (
-                    <>
-                      <Text size="sm" c="dimmed">
-                        {tItem("integration.description")}
-                      </Text>
-                      {selectedIntegrations.map((integration) => {
-                        const canEdit = editableIntegrationIds.includes(integration.id);
-                        return (
-                          <Group key={integration.id} justify="space-between" wrap="nowrap" gap="sm">
-                            <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
-                              <IntegrationAvatar kind={integration.kind} size="sm" />
-                              <Stack gap={0} style={{ minWidth: 0 }}>
-                                <Text fw={600} size="sm" truncate>
-                                  {integration.name}
+              {showAppTab && (
+                <Tabs.Panel value="app" pt="md">
+                  {appId && <EmbeddedAppEditForm appId={appId} handleRef={appEditRef} />}
+                </Tabs.Panel>
+              )}
+              {showIntegrationTab && (
+                <Tabs.Panel value="integration" pt="md">
+                  <Stack>
+                    {displayedIntegrationId === null && (
+                      <>
+                        <Text size="sm" c="dimmed">
+                          {tItem("integration.description")}
+                        </Text>
+                        {selectedIntegrations.map((integration) => {
+                          const canEdit = editableIntegrationIds.includes(integration.id);
+                          return (
+                            <Group key={integration.id} justify="space-between" wrap="nowrap" gap="sm">
+                              <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+                                <IntegrationAvatar kind={integration.kind} size="sm" />
+                                <Stack gap={0} style={{ minWidth: 0 }}>
+                                  <Text fw={600} size="sm" truncate>
+                                    {integration.name}
+                                  </Text>
+                                  <Text size="xs" c="dimmed" truncate>
+                                    {integration.url}
+                                  </Text>
+                                </Stack>
+                              </Group>
+                              {canEdit ? (
+                                <Button
+                                  type="button"
+                                  variant="light"
+                                  leftSection={<IconPencil size={16} />}
+                                  onClick={() => beginEditingIntegration(integration.id)}
+                                  aria-label={tItem("integration.editLabel", { name: integration.name })}
+                                >
+                                  {tItem("integration.action")}
+                                </Button>
+                              ) : (
+                                <Text size="xs" c="dimmed" ta="end">
+                                  {tItem("integration.fullAccessRequired")}
                                 </Text>
-                                <Text size="xs" c="dimmed" truncate>
-                                  {integration.url}
-                                </Text>
-                              </Stack>
+                              )}
                             </Group>
-                            {canEdit ? (
-                              <Button
-                                type="button"
-                                variant="light"
-                                leftSection={<IconPencil size={16} />}
-                                onClick={() => beginEditingIntegration(integration.id)}
-                                aria-label={tItem("integration.editLabel", { name: integration.name })}
-                              >
-                                {tItem("integration.action")}
-                              </Button>
-                            ) : (
-                              <Text size="xs" c="dimmed" ta="end">
-                                {tItem("integration.fullAccessRequired")}
-                              </Text>
-                            )}
-                          </Group>
-                        );
-                      })}
-                    </>
-                  )}
-                  {displayedIntegrationId !== null && selectedIntegrations.length > 1 && (
-                    <Button
-                      type="button"
-                      variant="subtle"
-                      leftSection={<IconArrowLeft size={16} />}
-                      onClick={() => setActiveIntegrationId(null)}
-                      style={{ alignSelf: "start" }}
-                    >
-                      {tCommon("action.previous")}
-                    </Button>
-                  )}
-                  {integrationIdsToRender.map((integrationId) => (
-                    <Box key={integrationId} hidden={displayedIntegrationId !== integrationId}>
-                      {IntegrationEditForm && (
-                        <IntegrationEditForm
-                          integrationId={integrationId}
-                          handleRef={getIntegrationEditRef(integrationId)}
-                          onSuccess={innerProps.onIntegrationSaved}
-                        />
-                      )}
-                    </Box>
-                  ))}
-                </Stack>
-              </Tabs.Panel>
-            )}
-          </Tabs>
+                          );
+                        })}
+                      </>
+                    )}
+                    {displayedIntegrationId !== null && selectedIntegrations.length > 1 && (
+                      <Button
+                        type="button"
+                        variant="subtle"
+                        leftSection={<IconArrowLeft size={16} />}
+                        onClick={() => setActiveIntegrationId(null)}
+                        style={{ alignSelf: "start" }}
+                      >
+                        {tCommon("action.previous")}
+                      </Button>
+                    )}
+                    {integrationIdsToRender.map((integrationId) => (
+                      <Box key={integrationId} hidden={displayedIntegrationId !== integrationId}>
+                        {IntegrationEditForm && (
+                          <IntegrationEditForm
+                            integrationId={integrationId}
+                            handleRef={getIntegrationEditRef(integrationId)}
+                            onSuccess={innerProps.onIntegrationSaved}
+                          />
+                        )}
+                      </Box>
+                    ))}
+                  </Stack>
+                </Tabs.Panel>
+              )}
+            </Tabs>
+            <Box
+              pos="sticky"
+              bottom={0}
+              style={{
+                marginInline: "calc(var(--mantine-spacing-md) * -1)",
+                marginBottom: "calc(var(--mantine-spacing-md) * -1)",
+                paddingInline: "var(--mantine-spacing-md)",
+                paddingBlock: "var(--mantine-spacing-sm)",
+                background: "var(--mantine-color-body)",
+                borderTop: "1px solid var(--mantine-color-default-border)",
+              }}
+            >
+              <Group justify="end">
+                <Button onClick={actions.closeModal} variant="subtle" color="gray">
+                  {tCommon("action.cancel")}
+                </Button>
+                <Button type="submit" loading={isSubmitting}>
+                  {tCommon("action.saveChanges")}
+                </Button>
+              </Group>
+            </Box>
+          </Stack>
         ) : (
           widgetFormContent
         )}
-        {footer}
-      </Stack>
-    </FormProvider>
+      </FormProvider>
+    </form>
   );
 }).withOptions({
   keepMounted: true,

packages/widgets/src/widget-card-shell.module.css

@@ -1,34 +0,0 @@
-.card {
-  @mixin dark {
-    --background-color: rgb(from var(--mantine-color-dark-6) r g b / var(--opacity));
-    --default-border-color: rgb(from var(--mantine-color-dark-4) r g b / var(--opacity));
-  }
-
-  @mixin light {
-    --background-color: rgb(from var(--mantine-color-white) r g b / var(--opacity));
-    --default-border-color: rgb(from var(--mantine-color-gray-3) r g b / var(--opacity));
-  }
-
-  background-color: var(--background-color) !important;
-  border-color: var(--border-color, var(--default-border-color)) !important;
-}
-
-.card.iframe {
-  background-color: transparent !important;
-  border-color: transparent !important;
-}
-
-.title {
-  @mixin dark {
-    --background-color: rgb(from var(--mantine-color-dark-6) r g b / var(--opacity));
-    --default-border-color: rgb(from var(--mantine-color-dark-4) r g b / var(--opacity));
-  }
-
-  @mixin light {
-    --background-color: rgb(from var(--mantine-color-white) r g b / var(--opacity));
-    --default-border-color: rgb(from var(--mantine-color-gray-3) r g b / var(--opacity));
-  }
-
-  background-color: var(--background-color) !important;
-  border-color: var(--border-color, var(--default-border-color)) !important;
-}

packages/widgets/src/widget-card-shell.tsx

@@ -1,95 +0,0 @@
-"use client";
-
-import type { AriaRole, CSSProperties, PropsWithChildren, Ref } from "react";
-import type { CardProps } from "@mantine/core";
-import { Badge, Card } from "@mantine/core";
-import combineClasses from "clsx";
-
-import type { WidgetKind } from "@homarr/definitions";
-import type { BoardItemAdvancedOptions } from "@homarr/validation/shared";
-
-import classes from "./widget-card-shell.module.css";
-
-const getOverflow = (kind: WidgetKind, hasCustomCssClasses: boolean): CSSProperties => {
-  if (kind === "systemResources") return { overflowX: "visible", overflowY: "visible" };
-  if (kind === "iframe" || kind === "assistant") return { overflowX: "hidden", overflowY: "hidden" };
-  if (hasCustomCssClasses) return {};
-  return { overflowX: "hidden", overflowY: "auto" };
-};
-
-interface WidgetCardShellProps extends PropsWithChildren<Omit<CardProps, "className" | "styles">> {
-  kind: WidgetKind;
-  advancedOptions: BoardItemAdvancedOptions;
-  opacity: number;
-  className?: string;
-  innerRef?: Ref<HTMLDivElement>;
-  id?: string;
-  role?: AriaRole;
-  "aria-label"?: string;
-  "data-advanced-focus-surface"?: boolean;
-  "data-grid-item-content"?: boolean;
-}
-
-export const WidgetCardShell = ({
-  kind,
-  advancedOptions,
-  opacity,
-  className,
-  innerRef,
-  children,
-  ...cardProps
-}: WidgetCardShellProps) => (
-  <Card
-    {...cardProps}
-    ref={innerRef}
-    className={combineClasses(
-      classes.card,
-      kind === "iframe" && classes.iframe,
-      `${kind}-wrapper`,
-      "board-grid-item-content",
-      advancedOptions.customCssClasses.join(" "),
-      className,
-    )}
-    styles={{
-      root: {
-        "--opacity": opacity,
-        "--border-color": advancedOptions.borderColor || undefined,
-        containerType: "size",
-        ...getOverflow(kind, advancedOptions.customCssClasses.length > 0),
-      } as CSSProperties,
-    }}
-  >
-    {children}
-  </Card>
-);
-
-interface WidgetTitleBadgeProps {
-  advancedOptions: BoardItemAdvancedOptions;
-  opacity: number;
-  radius: CardProps["radius"];
-}
-
-export const WidgetTitleBadge = ({ advancedOptions, opacity, radius }: WidgetTitleBadgeProps) => {
-  if (!advancedOptions.title?.trim()) return null;
-
-  return (
-    <Badge
-      pos="absolute"
-      style={{ zIndex: "var(--mantine-z-index-app)" }}
-      top={2}
-      left={16}
-      size="xs"
-      radius={radius}
-      styles={{
-        root: {
-          "--border-color": advancedOptions.borderColor || undefined,
-          "--opacity": opacity,
-        } as CSSProperties,
-      }}
-      className={classes.title}
-      c="var(--mantine-color-text)"
-    >
-      {advancedOptions.title}
-    </Badge>
-  );
-};