merge: sync release/v2

apps/nextjs/src/components/access/access-picker.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Button, Center, Combobox, Group, Loader, ScrollArea, useCombobox } from "@mantine/core";
+import type { ButtonProps } from "@mantine/core";
+
+export interface AccessPickerOption<T> {
+  value: string;
+  label: string;
+  keywords?: readonly string[];
+  content: ReactNode;
+  item: T;
+}
+
+export type AccessPickerTriggerProps = Omit<ButtonProps, "children" | "loading" | "onClick" | "type">;
+
+interface AccessPickerProps<T> {
+  label: string;
+  searchPlaceholder: string;
+  emptyMessage: string;
+  triggerLabel: string;
+  options: AccessPickerOption<T>[];
+  isPending: boolean;
+  onSelect: (option: AccessPickerOption<T>) => void | Promise<void>;
+  triggerProps?: AccessPickerTriggerProps;
+}
+
+export const AccessPicker = <T,>({
+  label,
+  searchPlaceholder,
+  emptyMessage,
+  triggerLabel,
+  options,
+  isPending,
+  onSelect,
+  triggerProps,
+}: AccessPickerProps<T>) => {
+  const [search, setSearch] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const combobox = useCombobox({
+    onDropdownClose: () => {
+      combobox.resetSelectedOption();
+      setSearch("");
+      requestAnimationFrame(() => combobox.focusTarget());
+    },
+    onDropdownOpen: () => {
+      combobox.selectFirstOption();
+      requestAnimationFrame(() => combobox.focusSearchInput());
+    },
+  });
+
+  const normalizedSearch = search.trim().toLowerCase();
+  const filteredOptions = options.filter((option) => {
+    if (!normalizedSearch) return true;
+
+    const searchableText = [option.label, ...(option.keywords ?? [])].join(" ").toLowerCase();
+    return searchableText.includes(normalizedSearch);
+  });
+  const visibleOptions = filteredOptions.slice(0, 5);
+
+  const handleSelect = (value: string) => {
+    const option = options.find((item) => item.value === value);
+    if (!option || isSubmitting) return;
+
+    combobox.closeDropdown();
+    setIsSubmitting(true);
+
+    const submit = async () => {
+      try {
+        await onSelect(option);
+      } finally {
+        setIsSubmitting(false);
+      }
+    };
+
+    void submit().catch(() => undefined);
+  };
+
+  return (
+    <Combobox store={combobox} onOptionSubmit={handleSelect} width="target" withinPortal>
+      <Combobox.Target targetType="button">
+        <Button
+          {...triggerProps}
+          onClick={() => combobox.toggleDropdown()}
+          rightSection={
+            <Group gap={4} wrap="nowrap">
+              {triggerProps?.rightSection}
+              <Combobox.Chevron />
+            </Group>
+          }
+          loading={isSubmitting}
+          disabled={isSubmitting || triggerProps?.disabled}
+        >
+          {triggerLabel}
+        </Button>
+      </Combobox.Target>
+
+      <Combobox.Dropdown>
+        <Combobox.Search
+          value={search}
+          onChange={(event) => {
+            setSearch(event.currentTarget.value);
+            combobox.updateSelectedOptionIndex();
+          }}
+          placeholder={searchPlaceholder}
+          aria-label={label}
+        />
+        <ScrollArea.Autosize mah={300} type="auto">
+          <Combobox.Options>
+            {isPending && (
+              <Center p="md">
+                <LoaderPlaceholder />
+              </Center>
+            )}
+            {!isPending && filteredOptions.length === 0 && <Combobox.Empty>{emptyMessage}</Combobox.Empty>}
+            {!isPending &&
+              visibleOptions.map((option) => (
+                <Combobox.Option value={option.value} key={option.value}>
+                  {option.content}
+                </Combobox.Option>
+              ))}
+          </Combobox.Options>
+        </ScrollArea.Autosize>
+      </Combobox.Dropdown>
+    </Combobox>
+  );
+};
+
+const LoaderPlaceholder = () => <Loader size="sm" />;

apps/nextjs/src/components/access/group-access-form.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { Anchor, Button, Group, Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
 import { IconPlus } from "@tabler/icons-react";
 
-import { useModalAction } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
 import { Link } from "@homarr/ui";
 
@@ -11,7 +10,7 @@ import { AccessSelectRow } from "./access-table-rows";
 import { useAccessContext } from "./context";
 import type { AccessFormType } from "./form";
 import { FormProvider, useForm } from "./form";
-import { GroupSelectModal } from "./group-select-modal";
+import { GroupSelect } from "./group-select";
 import type { FormProps } from "./user-access-form";
 
 export const GroupAccessForm = <TPermission extends string>({
@@ -24,8 +23,6 @@ export const GroupAccessForm = <TPermission extends string>({
   const [groups, setGroups] = useState<Map<string, AccessQueryData<string>["groups"][number]["group"]>>(
     new Map(accessQueryData.groups.map(({ group }) => [group.id, group])),
   );
-  const { openModal } = useModalAction(GroupSelectModal);
-  const tCommon = useI18n("common");
   const tPermissions = useI18n("permission");
   const form = useForm({
     initialValues: {
@@ -36,23 +33,6 @@ export const GroupAccessForm = <TPermission extends string>({
     },
   });
 
-  const handleAddUser = () => {
-    openModal({
-      presentGroupIds: form.values.items.map(({ principalId: id }) => id),
-      onSelect: (group) => {
-        setGroups((prev) => new Map(prev).set(group.id, group));
-        form.setFieldValue("items", [
-          {
-            principalId: group.id,
-            permission: defaultPermission,
-          },
-          ...form.values.items,
-        ]);
-        handleCountChange((prev) => prev + 1);
-      },
-    });
-  };
-
   return (
     <form onSubmit={form.onSubmit((values) => handleSubmit(values as AccessFormType<TPermission>))}>
       <FormProvider form={form}>
@@ -79,9 +59,21 @@ export const GroupAccessForm = <TPermission extends string>({
           </Table>
 
           <Group justify="space-between">
-            <Button rightSection={<IconPlus size="1rem" />} variant="light" onClick={handleAddUser}>
-              {tCommon("action.add")}
-            </Button>
+            <GroupSelect
+              presentGroupIds={form.values.items.map(({ principalId: id }) => id)}
+              onSelect={(group) => {
+                setGroups((prev) => new Map(prev).set(group.id, group));
+                form.setFieldValue("items", [
+                  {
+                    principalId: group.id,
+                    permission: defaultPermission,
+                  },
+                  ...form.values.items,
+                ]);
+                handleCountChange((prev) => prev + 1);
+              }}
+              triggerProps={{ rightSection: <IconPlus size="1rem" />, variant: "light" }}
+            />
             <Button type="submit" loading={isPending}>
               {tPermissions("action.saveGroup")}
             </Button>

apps/nextjs/src/components/access/group-select-modal.tsx

@@ -1,73 +0,0 @@
-import { useState } from "react";
-import { Button, Group, Loader, Select, Stack } from "@mantine/core";
-
-import { clientApi } from "@homarr/api/client";
-import type { GroupPermissionKey } from "@homarr/definitions";
-import { useForm } from "@homarr/form";
-import { createModal } from "@homarr/modals";
-import { useI18n } from "@homarr/translation/client";
-
-interface InnerProps {
-  withPermissions?: boolean;
-  presentGroupIds: string[];
-  onSelect: (props: { id: string; name: string; permissions?: GroupPermissionKey[] }) => void | Promise<void>;
-  confirmLabel?: string;
-}
-
-interface GroupSelectFormType {
-  groupId: string;
-}
-
-export const GroupSelectModal = createModal<InnerProps>(({ actions, innerProps }) => {
-  const tGroup = useI18n("group.action.select");
-  const tCommon = useI18n("common");
-  const { data: groups, isPending } = clientApi.group.selectable.useQuery({
-    withPermissions: innerProps.withPermissions,
-  });
-  const [loading, setLoading] = useState(false);
-  const form = useForm<GroupSelectFormType>();
-  const handleSubmitAsync = async (values: GroupSelectFormType) => {
-    const currentGroup = groups?.find((group) => group.id === values.groupId);
-    if (!currentGroup) return;
-    setLoading(true);
-    await innerProps.onSelect({
-      id: currentGroup.id,
-      name: currentGroup.name,
-      permissions: "permissions" in currentGroup ? (currentGroup.permissions as GroupPermissionKey[]) : undefined,
-    });
-
-    setLoading(false);
-    actions.closeModal();
-  };
-
-  const confirmLabel = innerProps.confirmLabel ?? tCommon("action.add");
-
-  return (
-    <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
-      <Stack>
-        <Select
-          {...form.getInputProps("groupId")}
-          label={tGroup("label")}
-          clearable
-          searchable
-          leftSection={isPending ? <Loader size="xs" /> : undefined}
-          nothingFoundMessage={tGroup("notFound")}
-          limit={5}
-          data={groups
-            ?.filter((group) => !innerProps.presentGroupIds.includes(group.id))
-            .map((group) => ({ value: group.id, label: group.name }))}
-        />
-        <Group justify="end">
-          <Button variant="default" onClick={actions.closeModal}>
-            {tCommon("action.cancel")}
-          </Button>
-          <Button type="submit" loading={loading}>
-            {confirmLabel}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
-  );
-}).withOptions({
-  defaultTitle: (t) => t("permission.groupSelect.title"),
-});

apps/nextjs/src/components/access/group-select.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { Text } from "@mantine/core";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import type { GroupPermissionKey } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
+
+import type { AccessPickerOption, AccessPickerTriggerProps } from "./access-picker";
+import { AccessPicker } from "./access-picker";
+
+type SelectableGroup = RouterOutputs["group"]["selectable"][number];
+
+interface GroupSelectProps {
+  withPermissions?: boolean;
+  presentGroupIds: string[];
+  onSelect: (group: { id: string; name: string; permissions?: GroupPermissionKey[] }) => void | Promise<void>;
+  triggerLabel?: string;
+  triggerProps?: AccessPickerTriggerProps;
+}
+
+export const GroupSelect = ({
+  withPermissions,
+  presentGroupIds,
+  onSelect,
+  triggerLabel,
+  triggerProps,
+}: GroupSelectProps) => {
+  const tGroup = useI18n("group.action.select");
+  const tCommon = useI18n("common");
+  const { data: groups, isPending } = clientApi.group.selectable.useQuery({ withPermissions });
+  const availableGroups = (groups ?? []).filter((group) => !presentGroupIds.includes(group.id));
+  const options: AccessPickerOption<SelectableGroup>[] = availableGroups.map((group) => ({
+    value: group.id,
+    label: group.name,
+    keywords: getGroupPermissions(group) ?? [],
+    item: group,
+    content: <Text size="sm">{group.name}</Text>,
+  }));
+
+  const handleSelect = ({ item: group }: AccessPickerOption<SelectableGroup>) =>
+    onSelect({
+      id: group.id,
+      name: group.name,
+      permissions: getGroupPermissions(group),
+    });
+
+  return (
+    <AccessPicker
+      label={tGroup("label")}
+      searchPlaceholder={tGroup("label")}
+      emptyMessage={tGroup("notFound")}
+      triggerLabel={triggerLabel ?? tCommon("action.add")}
+      triggerProps={triggerProps}
+      options={options}
+      isPending={isPending}
+      onSelect={handleSelect}
+    />
+  );
+};
+
+const getGroupPermissions = (group: SelectableGroup) => {
+  if ("permissions" in group) return group.permissions as GroupPermissionKey[];
+  return undefined;
+};

apps/nextjs/src/components/access/user-access-form.tsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { Anchor, Box, Button, Group, Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
 import { IconPlus } from "@tabler/icons-react";
 
-import { useModalAction } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
 import { Link, UserAvatar } from "@homarr/ui";
 
@@ -11,7 +10,7 @@ import { AccessDisplayRow, AccessSelectRow } from "./access-table-rows";
 import { useAccessContext } from "./context";
 import type { AccessFormType, HandleCountChange } from "./form";
 import { FormProvider, useForm } from "./form";
-import { UserSelectModal } from "./user-select-modal";
+import { UserSelect } from "./user-select";
 
 export interface FormProps<TPermission extends string> {
   entity: {
@@ -41,8 +40,6 @@ export const UsersAccessForm = <TPermission extends string>({
   const [users, setUsers] = useState<Map<string, UserItemContentProps["user"]>>(
     new Map(accessQueryData.users.map(({ user }) => [user.id, user])),
   );
-  const { openModal } = useModalAction(UserSelectModal);
-  const tCommon = useI18n("common");
   const tPermissions = useI18n("permission");
   const form = useForm({
     initialValues: {
@@ -52,25 +49,8 @@ export const UsersAccessForm = <TPermission extends string>({
       })),
     },
   });
-
-  const handleAddUser = () => {
-    const presentUserIds = form.values.items.map(({ principalId: id }) => id);
-
-    openModal({
-      presentUserIds: entity.ownerId ? presentUserIds.concat(entity.ownerId) : presentUserIds,
-      onSelect: (user) => {
-        setUsers((prev) => new Map(prev).set(user.id, user));
-        form.setFieldValue("items", [
-          {
-            principalId: user.id,
-            permission: defaultPermission,
-          },
-          ...form.values.items,
-        ]);
-        handleCountChange((prev) => prev + 1);
-      },
-    });
-  };
+  const presentUserIds = form.values.items.map(({ principalId: id }) => id);
+  if (entity.ownerId) presentUserIds.push(entity.ownerId);
 
   return (
     <form onSubmit={form.onSubmit((values) => handleSubmit(values as AccessFormType<TPermission>))}>
@@ -101,9 +81,21 @@ export const UsersAccessForm = <TPermission extends string>({
           </Table>
 
           <Group justify="space-between">
-            <Button rightSection={<IconPlus size="1rem" />} variant="light" onClick={handleAddUser}>
-              {tCommon("action.add")}
-            </Button>
+            <UserSelect
+              presentUserIds={presentUserIds}
+              onSelect={(user) => {
+                setUsers((prev) => new Map(prev).set(user.id, user));
+                form.setFieldValue("items", [
+                  {
+                    principalId: user.id,
+                    permission: defaultPermission,
+                  },
+                  ...form.values.items,
+                ]);
+                handleCountChange((prev) => prev + 1);
+              }}
+              triggerProps={{ rightSection: <IconPlus size="1rem" />, variant: "light" }}
+            />
             <Button type="submit" loading={isPending}>
               {tPermissions("action.saveUser")}
             </Button>

apps/nextjs/src/components/access/user-select-modal.tsx

@@ -1,103 +0,0 @@
-import { useState } from "react";
-import type { SelectProps } from "@mantine/core";
-import { Button, Group, Loader, Select, Stack } from "@mantine/core";
-import { IconCheck } from "@tabler/icons-react";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import type { SupportedAuthProvider } from "@homarr/definitions";
-import { useForm } from "@homarr/form";
-import { createModal } from "@homarr/modals";
-import { useI18n } from "@homarr/translation/client";
-import { UserAvatar } from "@homarr/ui";
-
-interface InnerProps {
-  presentUserIds: string[];
-  allowedProviders?: SupportedAuthProvider[];
-  onSelect: (props: { id: string; name: string; image: string; email: string | null }) => void | Promise<void>;
-  confirmLabel?: string;
-}
-
-interface UserSelectFormType {
-  userId: string;
-}
-
-export const UserSelectModal = createModal<InnerProps>(({ actions, innerProps }) => {
-  const tUser = useI18n("user.action.select");
-  const tCommon = useI18n("common");
-  const { data: users, isPending } = clientApi.user.selectable.useQuery({
-    providers: innerProps.allowedProviders,
-  });
-  const [loading, setLoading] = useState(false);
-  const form = useForm<UserSelectFormType>();
-  const handleSubmitAsync = async (values: UserSelectFormType) => {
-    const currentUser = users?.find((user) => user.id === values.userId);
-    if (!currentUser) return;
-    setLoading(true);
-    await innerProps.onSelect({
-      id: currentUser.id,
-      name: currentUser.name ?? "",
-      image: currentUser.image ?? "",
-      email: currentUser.email ?? null,
-    });
-
-    setLoading(false);
-    actions.closeModal();
-  };
-
-  const confirmLabel = innerProps.confirmLabel ?? tCommon("action.add");
-  const currentUser = users?.find((user) => user.id === form.values.userId);
-
-  return (
-    <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
-      <Stack>
-        <Select
-          {...form.getInputProps("userId")}
-          label={tUser("label")}
-          searchable
-          clearable
-          leftSection={
-            isPending ? <Loader size="xs" /> : currentUser ? <UserAvatar user={currentUser} size="xs" /> : undefined
-          }
-          nothingFoundMessage={tUser("notFound")}
-          renderOption={createRenderOption(users ?? [])}
-          limit={5}
-          data={users
-            ?.filter((user) => !innerProps.presentUserIds.includes(user.id))
-            .map((user) => ({ value: user.id, label: user.name ?? "" }))}
-        />
-        <Group justify="end">
-          <Button variant="default" onClick={actions.closeModal}>
-            {tCommon("action.cancel")}
-          </Button>
-          <Button type="submit" loading={loading}>
-            {confirmLabel}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
-  );
-}).withOptions({
-  defaultTitle: (t) => t("permission.userSelect.title"),
-});
-
-const iconProps = {
-  stroke: 1.5,
-  color: "currentColor",
-  opacity: 0.6,
-  size: "1rem",
-};
-
-const createRenderOption = (users: RouterOutputs["user"]["selectable"]): SelectProps["renderOption"] =>
-  function InnerRenderRoot({ option, checked }) {
-    const user = users.find((user) => user.id === option.value);
-    if (!user) return null;
-
-    return (
-      <Group flex="1" gap="xs">
-        <UserAvatar user={user} size="xs" />
-        {option.label}
-        {checked && <IconCheck style={{ marginInlineStart: "auto" }} {...iconProps} />}
-      </Group>
-    );
-  };

apps/nextjs/src/components/access/user-select.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { Group, Stack, Text } from "@mantine/core";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import type { SupportedAuthProvider } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
+import { UserAvatar } from "@homarr/ui";
+
+import type { AccessPickerOption, AccessPickerTriggerProps } from "./access-picker";
+import { AccessPicker } from "./access-picker";
+
+type SelectableUser = RouterOutputs["user"]["selectable"][number];
+
+interface UserSelectProps {
+  presentUserIds: string[];
+  allowedProviders?: SupportedAuthProvider[];
+  onSelect: (user: { id: string; name: string; image: string; email: string | null }) => void | Promise<void>;
+  triggerLabel?: string;
+  triggerProps?: AccessPickerTriggerProps;
+}
+
+export const UserSelect = ({
+  presentUserIds,
+  allowedProviders,
+  onSelect,
+  triggerLabel,
+  triggerProps,
+}: UserSelectProps) => {
+  const tUser = useI18n("user.action.select");
+  const tCommon = useI18n("common");
+  const { data: users, isPending } = clientApi.user.selectable.useQuery({ providers: allowedProviders });
+  const availableUsers = (users ?? []).filter((user) => !presentUserIds.includes(user.id));
+  const options: AccessPickerOption<SelectableUser>[] = availableUsers.map((user) => ({
+    value: user.id,
+    label: user.name ?? "",
+    keywords: [user.email ?? ""],
+    item: user,
+    content: (
+      <Group wrap="nowrap" gap="xs">
+        <UserAvatar user={user} size="xs" />
+        <Stack gap={0}>
+          <Text size="sm">{user.name}</Text>
+          {user.email && (
+            <Text size="xs" c="dimmed">
+              {user.email}
+            </Text>
+          )}
+        </Stack>
+      </Group>
+    ),
+  }));
+
+  const handleSelect = ({ item: user }: AccessPickerOption<SelectableUser>) =>
+    onSelect({
+      id: user.id,
+      name: user.name ?? "",
+      image: user.image ?? "",
+      email: user.email ?? null,
+    });
+
+  return (
+    <AccessPicker
+      label={tUser("label")}
+      searchPlaceholder={tUser("label")}
+      emptyMessage={tUser("notFound")}
+      triggerLabel={triggerLabel ?? tCommon("action.add")}
+      triggerProps={triggerProps}
+      options={options}
+      isPending={isPending}
+      onSelect={handleSelect}
+    />
+  );
+};

apps/nextjs/src/components/assistant/assistant-panel.tsx

@@ -130,8 +130,8 @@ import { useTimeAgo } from "@homarr/common";
 import { assistantProviderIds, assistantProviderPresets, assistantReasoningModes } from "@homarr/definitions";
 import type { AssistantProvider } from "@homarr/definitions";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useConfirmModal } from "@homarr/modals";
 import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
+import { InlineConfirmActionIcon } from "@homarr/ui";
 
 import classes from "./assistant-panel.module.css";
 import { getAssistantActivityState } from "./assistant-activity-state";
@@ -2001,7 +2001,6 @@ const ThreadListItem = () => {
   const t = useI18n("assistant");
   const actionT = useI18n("common.action");
   const aui = useAui();
-  const { openConfirmModal } = useConfirmModal();
   const onSelect = useContext(HistorySelectContext);
   const remoteId = useAuiState((state) => state.threadListItem.remoteId);
   const title = useAuiState((state) => state.threadListItem.title);
@@ -2054,23 +2053,15 @@ const ThreadListItem = () => {
     }
   };
 
-  const deleteConversation = () => {
-    openConfirmModal({
-      title: t("deleteConversation.title"),
-      children: t("deleteConversation.description", { title: title ?? t("newConversation") }),
-      confirmProps: { color: "red" },
-      labels: { confirm: actionT("delete"), cancel: actionT("cancel") },
-      onConfirm: async () => {
-        try {
-          await aui.threadListItem().delete();
-        } catch {
-          showErrorNotification({
-            title: t("deleteConversation.failedTitle"),
-            message: t("deleteConversation.failedDescription"),
-          });
-        }
-      },
-    });
+  const deleteConversation = async () => {
+    try {
+      await aui.threadListItem().delete();
+    } catch {
+      showErrorNotification({
+        title: t("deleteConversation.failedTitle"),
+        message: t("deleteConversation.failedDescription"),
+      });
+    }
   };
 
   if (renameOpened) {
@@ -2152,16 +2143,19 @@ const ThreadListItem = () => {
           >
             <IconFileExport size={14} />
           </ActionIcon>
-          <ActionIcon
+          <InlineConfirmActionIcon
             variant="subtle"
             color="red"
             size="sm"
             title={actionT("delete")}
             aria-label={actionT("delete")}
-            onClick={deleteConversation}
+            confirmLabel={t("deleteConversation.description", { title: title ?? t("newConversation") })}
+            confirmationAriaLabel={t("deleteConversation.title")}
+            confirmationChildren={<IconCheck size={14} />}
+            onConfirm={deleteConversation}
           >
             <IconTrash size={14} />
-          </ActionIcon>
+          </InlineConfirmActionIcon>
         </Group>
       )}
       <ActionIcon

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

@@ -11,16 +11,17 @@ import classes from "./board-layout-thumbnail.module.css";
 interface BoardLayoutThumbnailProps {
   preview: BoardPreviewData | null;
   label: string;
-  fitFullLayout?: boolean;
+  previewRowLimit?: number;
   className?: string;
 }
 
-const maxThumbnailRows = 12;
+const compactBoardLayoutThumbnailRows = 12;
+export const maxBoardLayoutThumbnailRows = 48;
 
 export const BoardLayoutThumbnail = ({
   preview,
   label,
-  fitFullLayout = false,
+  previewRowLimit = compactBoardLayoutThumbnailRows,
   className,
 }: BoardLayoutThumbnailProps) => {
   const canvasClassName = [classes.canvas, className].filter(Boolean).join(" ");
@@ -34,7 +35,7 @@ export const BoardLayoutThumbnail = ({
   }
 
   const elements = projectBoardLayout(preview, layout, layout);
-  const thumbnailRowLimit = fitFullLayout ? Number.POSITIVE_INFINITY : maxThumbnailRows;
+  const thumbnailRowLimit = Math.max(1, Math.min(Math.floor(previewRowLimit), maxBoardLayoutThumbnailRows));
   const roots = preview.sections
     .filter((section) => section.kind === "empty")
     .toSorted((first, second) => (first.xOffset ?? 0) - (second.xOffset ?? 0) || first.id.localeCompare(second.id));
@@ -94,9 +95,21 @@ export const BoardLayoutThumbnail = ({
               }}
             >
               {laneElements.map((element) => {
+                const renderedWidth = Math.min(element.width, columnCount - element.xOffset);
+                const renderedHeight = Math.min(element.height, rowCount - element.yOffset);
                 const nestedItems =
                   element.type === "section"
-                    ? elements.filter((candidate) => candidate.type === "item" && candidate.sectionId === element.id)
+                    ? elements.filter(
+                        (candidate) =>
+                          candidate.type === "item" &&
+                          candidate.sectionId === element.id &&
+                          candidate.xOffset >= 0 &&
+                          candidate.xOffset < renderedWidth &&
+                          candidate.yOffset >= 0 &&
+                          candidate.yOffset < renderedHeight &&
+                          candidate.width > 0 &&
+                          candidate.height > 0,
+                      )
                     : [];
                 return (
                   <span
@@ -104,16 +117,16 @@ export const BoardLayoutThumbnail = ({
                     aria-hidden
                     className={`${classes.tile} ${element.type === "section" ? classes.container : ""}`}
                     style={{
-                      gridColumn: `${element.xOffset + 1} / span ${Math.min(element.width, columnCount - element.xOffset)}`,
-                      gridRow: `${element.yOffset + 1} / span ${Math.min(element.height, rowCount - element.yOffset)}`,
+                      gridColumn: `${element.xOffset + 1} / span ${renderedWidth}`,
+                      gridRow: `${element.yOffset + 1} / span ${renderedHeight}`,
                     }}
                   >
                     {element.type === "section" ? (
                       <span
                         className={classes.containerContents}
                         style={{
-                          gridTemplateColumns: `repeat(${element.width}, minmax(0, 1fr))`,
-                          gridTemplateRows: `repeat(${element.height}, minmax(0, 1fr))`,
+                          gridTemplateColumns: `repeat(${renderedWidth}, minmax(0, 1fr))`,
+                          gridTemplateRows: `repeat(${renderedHeight}, minmax(0, 1fr))`,
                         }}
                       >
                         {nestedItems.map((nestedItem) => (
@@ -123,11 +136,11 @@ export const BoardLayoutThumbnail = ({
                             style={{
                               gridColumn: `${nestedItem.xOffset + 1} / span ${Math.min(
                                 nestedItem.width,
-                                element.width - nestedItem.xOffset,
+                                renderedWidth - nestedItem.xOffset,
                               )}`,
                               gridRow: `${nestedItem.yOffset + 1} / span ${Math.min(
                                 nestedItem.height,
-                                element.height - nestedItem.yOffset,
+                                renderedHeight - nestedItem.yOffset,
                               )}`,
                             }}
                           >

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

@@ -15,6 +15,10 @@
   outline: none;
 }
 
+.results {
+  min-height: 0;
+}
+
 .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);
@@ -44,3 +48,19 @@
   border-color: var(--mantine-primary-color-filled);
   box-shadow: var(--mantine-shadow-md);
 }
+
+@media (max-width: $mantine-breakpoint-sm) {
+  .modalContent {
+    height: calc(100dvh - var(--modal-y-offset) * 2);
+  }
+
+  .modalBody,
+  .content {
+    min-height: 0;
+    height: 100%;
+  }
+
+  .results {
+    flex: 1;
+  }
+}

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

@@ -30,11 +30,12 @@ import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
 import { useI18n } from "@homarr/translation/client";
 import { Link, UserAvatar } from "@homarr/ui";
 
-import { BoardLayoutThumbnail } from "~/components/board/board-layout-thumbnail";
+import { BoardLayoutThumbnail, maxBoardLayoutThumbnailRows } from "~/components/board/board-layout-thumbnail";
 
 import classes from "./board-switcher.module.css";
 
 export const boardSwitcherHotkey = "shift+c";
+const boardSwitcherPreview = { previewRowLimit: maxBoardLayoutThumbnailRows } as const;
 
 export interface BoardSwitcherControls {
   open: () => void;
@@ -61,18 +62,12 @@ export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {
     data: boards = [],
     isPending,
     isError,
-  } = clientApi.board.getManageOverview.useQuery(
-    { fullPreview: true },
-    {
-      enabled: isOpen,
-    },
-  );
+  } = clientApi.board.getManageOverview.useQuery(boardSwitcherPreview, {
+    enabled: isOpen,
+  });
 
   const switcherBoards = useMemo(
-    () => [
-      ...boards.filter((board) => board.id !== currentBoard?.id),
-      ...boards.filter((board) => board.id === currentBoard?.id),
-    ],
+    () => boards.filter((board) => board.id !== currentBoard?.id),
     [boards, currentBoard?.id],
   );
   const filteredBoards = useMemo(() => {
@@ -91,7 +86,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(boardSwitcherPreview);
 
   const spotlightAction = useMemo(
     () => ({
@@ -228,7 +223,13 @@ export const BoardSwitcher = ({ children }: BoardSwitcherProps) => {
             radius="xl"
             classNames={{ input: classes.searchInput }}
           />
-          <ScrollArea.Autosize mah="min(80vh, 42rem)" type="never">
+          <ScrollArea.Autosize
+            mah="min(80vh, 42rem)"
+            type="never"
+            scrollbars="y"
+            overscrollBehavior="contain"
+            className={classes.results}
+          >
             {results}
           </ScrollArea.Autosize>
         </Stack>
@@ -335,7 +336,7 @@ const getBoardSwitcherResults = ({
               <BoardLayoutThumbnail
                 preview={board.preview}
                 label={t("preview", { name: board.name, count: String(board.preview?.items.length ?? 0) })}
-                fitFullLayout
+                previewRowLimit={boardSwitcherPreview.previewRowLimit}
               />
             </Card.Section>
             <Card.Section withBorder px="sm" py={6}>

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

@@ -334,6 +334,7 @@ const LoadedBoardItemContent = ({
             item={item}
             width={width}
             height={height}
+            displayScale={boardCanvasScale}
             widgetStateRef={widgetStateRef}
             widgetRuntimeRef={widgetRuntimeRef}
             displayMode={isAdvanced ? "advanced" : "compact"}
@@ -436,6 +437,7 @@ interface InnerContentProps {
   item: SectionItem;
   width: number;
   height: number;
+  displayScale: number;
   widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
   widgetRuntimeRef: WidgetRuntimeRef;
   displayMode: "compact" | "advanced";

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

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { ActionIcon, Menu } from "@mantine/core";
-import { IconCopy, IconDotsVertical, IconLayoutKanban, IconPencil } from "@tabler/icons-react";
+import { IconCopy, IconDotsVertical, IconLayoutKanban, IconPencil, IconTrash } from "@tabler/icons-react";
 
 import { useSession } from "@homarr/auth/client";
 import { useEditMode } from "@homarr/boards/edit-mode";
@@ -8,20 +8,21 @@ import { getWidgetName } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
 import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
+import { InlineConfirmMenuItem } from "@homarr/ui";
 import type { WidgetDefinition } from "@homarr/widgets/definition";
+import type { WidgetPreviewDimensions } from "@homarr/widgets/modals";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
-import { BoardRemoveConfirmationMenuItem } from "../remove-confirmation-menu-item";
 import { useSectionContext } from "../sections/section-context";
 import { useItemActions } from "./item-actions";
-import { useOpenItemMoveModal } from "./item-move-modal";
 import itemContentClasses from "./item-content.module.css";
+import { useOpenItemMoveModal } from "./item-move-modal";
 import { LazyWidgetEditModal, preloadWidgetEditModal } from "./lazy-widget-edit-modal";
 
 interface BoardItemMenuProps {
   item: SectionItem;
   definition: WidgetDefinition;
-  previewDimensions: { width: number; height: number; scale?: number };
+  previewDimensions: WidgetPreviewDimensions;
   resetErrorBoundary?: () => void;
 }
 
@@ -142,11 +143,14 @@ const BoardItemMenuInner = ({ item, definition, previewDimensions, resetErrorBou
           </Menu.Item>
         )}
         <Menu.Divider />
-        <BoardRemoveConfirmationMenuItem
-          label={tItem("action.remove")}
-          confirmationLabel={tItem("remove.message")}
+        <InlineConfirmMenuItem
+          color="red"
+          confirmLabel={tItem("remove.message")}
+          leftSection={<IconTrash size={16} />}
           onConfirm={() => removeItem({ itemId: item.id })}
-        />
+        >
+          {tItem("action.remove")}
+        </InlineConfirmMenuItem>
       </Menu.Dropdown>
     </Menu>
   );

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

@@ -11,6 +11,7 @@ import { useI18n } from "@homarr/translation/client";
 import type { Board, ContainerSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
 import { getLayoutRowCount } from "../layout";
 import { resolvePinnedGridCollisions } from "../sections/grid/dnd";
+import type { RegisteredGridEditor } from "../sections/grid/grid-editor-registry";
 import { useRegisteredGridEditors } from "../sections/grid/grid-editor-registry";
 import { getSectionGridColumnCount, getSectionGridPlacements } from "../sections/grid/section-grid-placements";
 import type { CommitSectionGridInput, SectionGridPlacement } from "../sections/grid/use-grid-layout-actions";
@@ -30,6 +31,7 @@ interface InnerProps extends OpenItemMoveModalInput {
   board: Board;
   currentLayoutId: string;
   commitSectionGrids: (snapshots: readonly CommitSectionGridInput[]) => void;
+  registeredGridEditors: ReadonlyMap<string, Pick<RegisteredGridEditor, "placementMaxRowCount">>;
 }
 
 interface MoveTarget {
@@ -57,8 +59,7 @@ export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) =
   const tLandmark = useI18n("board.landmark");
   const tContainer = useI18n("section.container");
   const tMoveResize = useI18n("item.moveResize");
-  const { board, commitSectionGrids, currentLayoutId, entry, sourceSectionId } = innerProps;
-  const registeredGridEditors = useRegisteredGridEditors();
+  const { board, commitSectionGrids, currentLayoutId, entry, registeredGridEditors, sourceSectionId } = innerProps;
   const minimumSize = useMemo(
     () => getEntryMinimumSize(board, currentLayoutId, entry),
     [board, currentLayoutId, entry],
@@ -235,6 +236,7 @@ export const ItemMoveModal = createModal<InnerProps>(({ actions, innerProps }) =
 export const useOpenItemMoveModal = () => {
   const board = useRequiredBoard();
   const currentLayoutId = useCurrentLayout();
+  const registeredGridEditors = useRegisteredGridEditors();
   const { commitSectionGrids } = useGridLayoutActions();
   const { openModal } = useModalAction(ItemMoveModal);
 
@@ -245,9 +247,10 @@ export const useOpenItemMoveModal = () => {
         board,
         currentLayoutId,
         commitSectionGrids,
+        registeredGridEditors,
       });
     },
-    [board, commitSectionGrids, currentLayoutId, openModal],
+    [board, commitSectionGrids, currentLayoutId, openModal, registeredGridEditors],
   );
 };
 

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

@@ -0,0 +1,14 @@
+.mobileDrawerContent {
+  height: min(80dvh, rem(640px));
+  max-height: 80dvh;
+  overscroll-behavior: contain;
+}
+
+.mobileDrawerBody {
+  padding-bottom: max(var(--mantine-spacing-md), env(safe-area-inset-bottom));
+}
+
+.mobileActionList {
+  display: flex;
+  flex-direction: column;
+}

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

@@ -2,7 +2,7 @@
 
 import type { MutableRefObject, ReactNode, RefObject } from "react";
 import { useCallback, useMemo, useState } from "react";
-import { Group, Loader, Menu, Text, Tooltip } from "@mantine/core";
+import { Drawer, Group, Loader, Menu, Text, Tooltip } from "@mantine/core";
 import { IconAlertTriangle, IconCircleCheck, IconMaximize, IconRefresh, IconSettings } from "@tabler/icons-react";
 import type { QueryClient, QueryKey } from "@tanstack/react-query";
 import { useIsFetching, useQueryClient } from "@tanstack/react-query";
@@ -20,10 +20,12 @@ import { getWidgetName } from "@homarr/definitions";
 import { translateIfNecessary } from "@homarr/translation";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
+import { useIsMobile } from "@homarr/ui/hooks";
 import type { WidgetDefinition, WidgetRuntimeRef } from "@homarr/widgets/definition";
 import { getWidgetQueryKeys, getWidgetRuntimeQueries, supportsAdvancedFocus } from "@homarr/widgets/definition";
 import { reduceWidgetOptionsWithDefinition } from "@homarr/widgets/manifest";
 import { getWidgetOptionTranslationNamespace } from "@homarr/widgets/option-translation";
+import type { WidgetPreviewDimensions } from "@homarr/widgets/modals";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
 import { useAdvancedFocus } from "../advanced-focus/context";
@@ -31,11 +33,14 @@ import { useBoardPermissions } from "../permissions/client";
 import { useItemActions } from "./item-actions";
 import { LazyWidgetEditModal, preloadWidgetEditModal } from "./lazy-widget-edit-modal";
 import { matchesWidgetItemQuery } from "./widget-query-scope";
+import classes from "./widget-context-menu.module.css";
+
+type ToggleOption = [key: string, option: { type: string; skipContextMenu?: boolean }];
 
 interface WidgetContextMenuProps {
   item: SectionItem;
   definition: WidgetDefinition;
-  previewDimensions: { width: number; height: number; scale?: number };
+  previewDimensions: WidgetPreviewDimensions;
   widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
   widgetRuntimeRef: WidgetRuntimeRef;
   sourceRef: RefObject<HTMLElement | null>;
@@ -134,11 +139,12 @@ export const WidgetContextMenu = ({
     [item.id, persistBoard],
   );
 
-  type OptionDef = { type: string; skipContextMenu?: boolean };
   const toggleOptions = useMemo(() => {
     if (!canConfigureWidget) return [];
-    const rawOptions = definition.createOptions(settings) as unknown as Record<string, OptionDef>;
-    return Object.entries(rawOptions).filter(([, option]) => option.type === "switch" && !option.skipContextMenu);
+    const rawOptions = definition.createOptions(settings) as unknown as Record<string, ToggleOption[1]>;
+    return Object.entries(rawOptions).filter(
+      ([, option]) => option.type === "switch" && !option.skipContextMenu,
+    ) as ToggleOption[];
   }, [canConfigureWidget, definition, settings]);
 
   const widgetContextActions =
@@ -222,6 +228,18 @@ export const WidgetContextMenu = ({
     [setItemOptions],
   );
 
+  const handleOpenAdvancedFocus = useCallback(() => {
+    if (!sourceRef.current) return;
+    openAdvancedFocus(item.id, sourceRef.current, {
+      restoreFocusTarget:
+        sourceRef.current.querySelector<HTMLElement>("[data-advanced-focus-trigger]") ?? sourceRef.current,
+    });
+  }, [item.id, openAdvancedFocus, sourceRef]);
+
+  const handleCloseMenu = useCallback(() => {
+    setMenuOpened(false);
+  }, []);
+
   if (!session || !settings.enableRightClickOnWidgets || isEditMode || item.kind === "app") {
     return <>{children}</>;
   }
@@ -239,21 +257,10 @@ export const WidgetContextMenu = ({
       onChange={setMenuOpened}
     >
       <Menu.ContextMenu>{children}</Menu.ContextMenu>
-      <Menu.Dropdown>
+      <WidgetContextMenuDropdown opened={menuOpened} onClose={handleCloseMenu} title={getWidgetName(item.kind, t)}>
         {canOpenAdvancedFocus && (
           <>
-            <Menu.Item
-              closeMenuOnClick
-              leftSection={<IconMaximize size={16} />}
-              onClick={() => {
-                if (sourceRef.current)
-                  openAdvancedFocus(item.id, sourceRef.current, {
-                    restoreFocusTarget:
-                      sourceRef.current.querySelector<HTMLElement>("[data-advanced-focus-trigger]") ??
-                      sourceRef.current,
-                  });
-              }}
-            >
+            <Menu.Item closeMenuOnClick leftSection={<IconMaximize size={16} />} onClick={handleOpenAdvancedFocus}>
               {t("item.advancedFocus.open")}
             </Menu.Item>
             <Menu.Divider />
@@ -319,11 +326,39 @@ export const WidgetContextMenu = ({
         >
           {tMenu("settings")}
         </Menu.Item>
-      </Menu.Dropdown>
+      </WidgetContextMenuDropdown>
     </Menu>
   );
 };
 
+interface WidgetContextMenuDropdownProps {
+  opened: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+}
+
+const WidgetContextMenuDropdown = ({ opened, onClose, title, children }: WidgetContextMenuDropdownProps) => {
+  const isMobile = useIsMobile();
+
+  if (!isMobile) return <Menu.Dropdown>{children}</Menu.Dropdown>;
+
+  return (
+    <Drawer
+      opened={opened}
+      onClose={onClose}
+      position="bottom"
+      size="min(80dvh, 40rem)"
+      title={title}
+      classNames={{ content: classes.mobileDrawerContent, body: classes.mobileDrawerBody }}
+    >
+      <div className={classes.mobileActionList} role="menu" aria-orientation="vertical" data-menu-dropdown>
+        {children}
+      </div>
+    </Drawer>
+  );
+};
+
 interface WidgetQueryStatusProps {
   queryClient: QueryClient;
   matchesQuery: (queryKey: QueryKey) => boolean;

apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css

@@ -30,11 +30,15 @@
   --mantine-spacing-md: calc(1rem * var(--board-canvas-ui-scale, 1));
   --mantine-spacing-lg: calc(1.25rem * var(--board-canvas-ui-scale, 1));
   --mantine-spacing-xl: calc(2rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-xxs: calc(0.6875rem * var(--board-canvas-ui-scale, 1));
   --mantine-font-size-xs: calc(0.75rem * var(--board-canvas-ui-scale, 1));
   --mantine-font-size-sm: calc(0.875rem * var(--board-canvas-ui-scale, 1));
   --mantine-font-size-md: calc(1rem * var(--board-canvas-ui-scale, 1));
   --mantine-font-size-lg: calc(1.125rem * var(--board-canvas-ui-scale, 1));
   --mantine-font-size-xl: calc(1.25rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-2xl: calc(1.5rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-3xl: calc(1.75rem * var(--board-canvas-ui-scale, 1));
+  --mantine-font-size-4xl: calc(2.25rem * var(--board-canvas-ui-scale, 1));
   --mantine-h1-font-size: calc(2.125rem * var(--board-canvas-ui-scale, 1));
   --mantine-h2-font-size: calc(1.625rem * var(--board-canvas-ui-scale, 1));
   --mantine-h3-font-size: calc(1.375rem * var(--board-canvas-ui-scale, 1));

apps/nextjs/src/components/board/modals/board-rename-modal.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import { Button, Group, Stack, TextInput } from "@mantine/core";
-import type { z } from "zod/v4";
-
-import { clientApi } from "@homarr/api/client";
-import { useZodForm } from "@homarr/form";
-import { createModal } from "@homarr/modals";
-import { useI18n } from "@homarr/translation/client";
-import { boardRenameSchema } from "@homarr/validation/board";
-
-interface InnerProps {
-  id: string;
-  previousName: string;
-  onSuccess?: (name: string) => void;
-}
-
-export const BoardRenameModal = createModal<InnerProps>(({ actions, innerProps }) => {
-  const utils = clientApi.useUtils();
-  const tCommon = useI18n("common");
-  const { mutate, isPending } = clientApi.board.renameBoard.useMutation({
-    onSettled() {
-      void utils.board.getBoardByName.invalidate({
-        name: innerProps.previousName,
-      });
-      void utils.board.getHomeBoard.invalidate();
-      void utils.board.getAllBoards.invalidate();
-    },
-  });
-  const form = useZodForm(boardRenameSchema.omit({ id: true }), {
-    initialValues: {
-      name: innerProps.previousName,
-    },
-  });
-
-  const handleSubmit = (values: FormType) => {
-    mutate(
-      {
-        id: innerProps.id,
-        name: values.name,
-      },
-      {
-        onSuccess: () => {
-          actions.closeModal();
-          innerProps.onSuccess?.(values.name);
-        },
-      },
-    );
-  };
-
-  return (
-    <form onSubmit={form.onSubmit(handleSubmit)}>
-      <Stack>
-        <TextInput label={tCommon("field.name")} {...form.getInputProps("name")} data-autofocus />
-        <Group justify="end">
-          <Button variant="subtle" color="gray" onClick={actions.closeModal}>
-            {tCommon("action.cancel")}
-          </Button>
-          <Button type="submit" loading={isPending}>
-            {tCommon("action.confirm")}
-          </Button>
-        </Group>
-      </Stack>
-    </form>
-  );
-}).withOptions({
-  defaultTitle: (t) => t("board.setting.section.dangerZone.action.rename.label"),
-});
-
-type FormType = Omit<z.infer<typeof boardRenameSchema>, "id">;

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

@@ -67,7 +67,7 @@ export const BoardContainerSection = ({ section }: Props) => {
           <Button
             className={classes.containerToggle}
             pos="absolute"
-            top={isVisuallyCollapsed ? 0 : "calc(var(--mantine-spacing-xs) * -1)"}
+            top={0}
             left={0}
             w="100%"
             h={isVisuallyCollapsed ? "100%" : 24}

apps/nextjs/src/components/board/sections/container/container-menu.tsx

@@ -1,12 +1,12 @@
 import { ActionIcon, Menu } from "@mantine/core";
-import { IconArrowsMove, IconLayoutKanban, IconPencil } from "@tabler/icons-react";
+import { IconArrowsMove, IconLayoutKanban, IconPencil, IconTrash } from "@tabler/icons-react";
 
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { useModalAction } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
+import { InlineConfirmMenuItem } from "@homarr/ui";
 
 import type { ContainerSectionItem } from "~/app/[locale]/boards/_types";
-import { BoardRemoveConfirmationMenuItem } from "../../remove-confirmation-menu-item";
 import { useOpenItemMoveModal } from "../../items/item-move-modal";
 import { useSectionContext } from "../section-context";
 import { useContainerActions } from "./container-actions";
@@ -59,11 +59,14 @@ export const BoardContainerMenu = ({ section }: { section: ContainerSectionItem
           {tItem("action.moveResize")}
         </Menu.Item>
         <Menu.Divider />
-        <BoardRemoveConfirmationMenuItem
-          label={tContainer("action.remove")}
-          confirmationLabel={tContainer("remove.message")}
+        <InlineConfirmMenuItem
+          color="red"
+          confirmLabel={tContainer("remove.message")}
+          leftSection={<IconTrash size={16} />}
           onConfirm={() => removeContainer({ id: section.id })}
-        />
+        >
+          {tContainer("action.remove")}
+        </InlineConfirmMenuItem>
       </Menu.Dropdown>
     </Menu>
   );

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

@@ -18,7 +18,7 @@ import {
   getReadonlyCanvasAttributes,
   normalizeGridPlacement,
 } from "~/components/board/layout";
-import { useBoardCanvasScale } from "~/components/board/layout/scaled-board-canvas";
+import { calculateBoardUiScale, useBoardCanvasScale } from "~/components/board/layout/scaled-board-canvas";
 import { useGridEditorRuntimeStatus } from "./grid-editor-runtime";
 import { createGridEntryElementStore, useGridEditorRegistry } from "./grid-editor-registry";
 import type { SectionGridPlacement } from "./use-grid-layout-actions";
@@ -138,9 +138,56 @@ 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);
+  // A container's own visible card is inset from its allocated board cell by the board's
+  // standard per-item gap (see the base, non-container `.staticItem[data-type="item"] >
+  // .contentMount` rule in section-grid.module.css - a container is placed as an "item" like
+  // any widget, so it gets that same gap). A widget's content just fills whatever size its
+  // card ends up being, but this SectionGrid instead computes its own fixed pixel size from
+  // the same column/row counts used to allocate the *outer*, uninset cell - so without
+  // subtracting that gap back out here, a container's inner grid renders larger than its own
+  // card and visually spills past its right/bottom edges. 10 must match that CSS rule's inset.
+  const effectiveCanvasScale = Number.isFinite(canvasScale) && canvasScale > 0 ? canvasScale : 1;
+  const outerCardInset = section.kind === "container" ? (2 * 10) / effectiveCanvasScale : 0;
+  const logicalWidth = getLogicalGridSize(columnCount) - outerCardInset;
+  const viewportHeight = getLogicalGridSize(viewportRowCount) - outerCardInset;
+  // Items are positioned in a coordinate space sized to the *un-inset* column/row count
+  // (fullGridWidth/Height below - see getLogicalItemStyle), but logicalWidth/Height above are
+  // deliberately smaller by outerCardInset to match the container's actual visible card size.
+  // Left alone, that mismatch means the items - not just the grid's own box - spill past the
+  // card's right/bottom edge by exactly that inset. Scale the grid's content down by the same
+  // ratio the board's own canvas uses for its whole-board zoom (see ScaledBoardCanvas), just one
+  // level deeper, so it fits the actual card instead of clipping. --board-canvas-ui-scale is
+  // corrected to compensate so icon/text sizing inside the container isn't affected.
+  const fullGridWidth = getLogicalGridSize(columnCount);
+  const fullGridHeight = getLogicalGridSize(rowCount);
+  // For a scrollable container, rowCount covers *all* content rows, not just the visible card -
+  // fullGridHeight grows right along with it, so a ratio built from it drifts toward 1 as content
+  // grows regardless of the (fixed) inset, under-scaling relative to what the actually-visible
+  // viewport needs and clipping the bottom of the visible rows. viewportHeight/viewportRowCount
+  // describe the real visible card size in both cases (they equal the non-scrollable values when
+  // rowCount and viewportRowCount are the same), so use those instead.
+  const fullViewportHeight = getLogicalGridSize(viewportRowCount);
+  // A uniform zoom is required (not a non-uniform transform scale(x, y)) - --board-canvas-ui-scale
+  // is a single scalar that every icon/text/custom-CSS size compensation in the app multiplies
+  // by, so a non-uniform stretch can never be captured by it correctly. That means one axis can
+  // be left with a small amount of unfilled slack when width/height need different ratios to
+  // exactly fit - centered below so it's even on both sides rather than left-aligned.
+  // logicalWidth/viewportHeight can go non-positive for a narrow (e.g. single-column) container
+  // on a heavily zoomed-out board, where outerCardInset (which grows as canvasScale shrinks) can
+  // exceed the container's own un-inset size. Floor the scale well above 0 so it can never reach
+  // zero or negative - combinedUiScale divides by this value, and this value is also used as
+  // zoom directly, both of which break (Infinity/NaN, or invalid/collapsed content) otherwise.
+  const containerContentScale =
+    section.kind === "container" && fullGridWidth > 0 && fullViewportHeight > 0
+      ? Math.max(0.01, Math.min(logicalWidth / fullGridWidth, viewportHeight / fullViewportHeight, 1))
+      : 1;
+  // Compute the combined value in JS rather than a CSS calc() referencing the existing
+  // --board-canvas-ui-scale: custom properties declared on the *same* element don't have a
+  // sequential/temporal order the way normal variables do, so any calc() on this element that
+  // both reads and writes --board-canvas-ui-scale (even indirectly, through another property)
+  // is a circular reference - CSS invalidates the whole group rather than using "the old value",
+  // silently breaking every icon/text/custom-CSS size that compensates off it for descendants.
+  const combinedUiScale = calculateBoardUiScale(canvasScale) / containerContentScale;
   // 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);
@@ -249,7 +296,15 @@ export const SectionGrid = ({
       >
         <Box
           className={classes.staticGrid}
-          style={{ width: logicalWidth, height: logicalHeight }}
+          style={
+            {
+              width: fullGridWidth,
+              height: fullGridHeight,
+              zoom: containerContentScale,
+              margin: containerContentScale < 1 ? "0 auto" : undefined,
+              ...(containerContentScale < 1 ? { "--board-canvas-ui-scale": combinedUiScale } : {}),
+            } as CSSProperties
+          }
           data-grid-section-id={section.id}
           data-kind={section.kind}
           data-grid-editor-error={isEditMode && editorRuntimeStatus === "error" ? "true" : undefined}

apps/nextjs/src/components/layout/header.tsx

@@ -27,11 +27,12 @@ export const MainHeader = async ({
   const session = await auth();
   const isAdmin = Boolean(session?.user.permissions.includes("admin"));
   const isDockerEnabled = isAdmin && env.ENABLE_DOCKER;
+  const resolvedLogoWithTitle = logoWithTitle ?? <HomarrLogoWithTitle size="md" />;
 
   return (
     <ConfigurableHeader
       logo={logo ?? <HomarrLogo size={appShellLogoHeight} />}
-      logoWithTitle={logoWithTitle ?? <HomarrLogoWithTitle size="md" />}
+      logoWithTitle={resolvedLogoWithTitle}
       actions={actions}
       boardEditAction={boardEditAction}
       boardSettingsAction={boardSettingsAction}

apps/nextjs/src/components/layout/header/configurable-header.module.css

@@ -2,6 +2,15 @@
   overflow: hidden;
 }
 
+.header[data-desktop-visible="false"] {
+  display: none;
+}
+
+.desktopContent {
+  width: 100%;
+  height: 100%;
+}
+
 .content {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -64,6 +73,41 @@
   flex: 0 0 auto;
 }
 
+.mobileContent {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mantine-spacing-xs);
+  width: 100%;
+  height: 100%;
+  padding-inline: var(--mantine-spacing-xs);
+}
+
+.mobileIdentity,
+.mobileActions {
+  min-width: 0;
+}
+
+.mobileIdentity {
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.mobileIdentity > :last-child {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.mobileIdentity h2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mobileActions {
+  flex: 0 0 auto;
+}
+
 .floatingControls {
   position: fixed;
   z-index: var(--homarr-z-index-board-header);
@@ -111,18 +155,21 @@
 }
 
 @media (max-width: $mantine-breakpoint-sm) {
-  .content {
-    gap: var(--mantine-spacing-xs);
-    padding-inline: var(--mantine-spacing-xs);
+  .header[data-desktop-visible="false"] {
+    display: block;
   }
 
-  .zone {
-    gap: var(--mantine-spacing-xs);
+  .desktopContent {
+    display: none;
   }
 
-  .search {
-    width: auto;
-    flex: 0 0 auto;
+  .mobileContent {
+    display: flex;
+  }
+
+  .floatingControls,
+  .floatingControlsCorner {
+    display: none;
   }
 }
 

apps/nextjs/src/components/layout/header/configurable-header.tsx

@@ -2,15 +2,7 @@
 
 import type { ReactNode } from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
-import {
-  AppShellHeader,
-  Avatar,
-  Group,
-  Indicator,
-  Loader,
-  Tooltip,
-  useMantineColorScheme,
-} from "@mantine/core";
+import { AppShellHeader, Avatar, Group, Indicator, Loader, Tooltip, useMantineColorScheme } from "@mantine/core";
 import {
   IconBrandDocker,
   IconHome,
@@ -116,14 +108,15 @@ export const ConfigurableHeader = ({
 
         return (
           <>
-            {headerPreferences.visible ? (
-              <AppShellHeader
-                maw="100vw"
-                zIndex="var(--homarr-z-index-board-header)"
-                className={classes.header}
-                data-advanced-focus-background
-                data-app-shell-header
-              >
+            <AppShellHeader
+              maw="100vw"
+              zIndex="var(--homarr-z-index-board-header)"
+              className={classes.header}
+              data-desktop-visible={headerPreferences.visible}
+              data-advanced-focus-background
+              data-app-shell-header
+            >
+              <div className={classes.desktopContent}>
                 <div className={classes.content}>
                   <div className={classes.zone} data-zone="left">
                     {hasNavigation ? <ClientBurger /> : null}
@@ -137,8 +130,31 @@ export const ConfigurableHeader = ({
                     {actions ? <Group className={classes.contextActions}>{actions}</Group> : null}
                   </div>
                 </div>
-              </AppShellHeader>
-            ) : (
+              </div>
+              <div className={classes.mobileContent}>
+                <Group className={classes.mobileIdentity} gap="xs" wrap="nowrap">
+                  {hasNavigation ? <ClientBurger /> : null}
+                  <HeaderLogo display="logo" logo={logo} logoWithTitle={logoWithTitle} label={t("items.logo")} />
+                </Group>
+                <Group className={classes.mobileActions} gap="xs" wrap="nowrap">
+                  {actions}
+                  {boardEditAction}
+                  {boardSettingsAction}
+                  <TourTarget id="board-search">
+                    <MobileSearchButton alwaysVisible />
+                  </TourTarget>
+                  <TourTarget id="board-user-menu">
+                    <UserButtonClient
+                      avatar={avatar}
+                      isAdmin={isAdmin}
+                      isDockerEnabled={isDockerEnabled}
+                      boardSwitcher={boardSwitcher}
+                    />
+                  </TourTarget>
+                </Group>
+              </div>
+            </AppShellHeader>
+            {!headerPreferences.visible ? (
               <FloatingHeaderControls>
                 {hasNavigation ? <ClientBurger /> : null}
                 <UserButtonClient
@@ -148,7 +164,7 @@ export const ConfigurableHeader = ({
                   boardSwitcher={boardSwitcher}
                 />
               </FloatingHeaderControls>
-            )}
+            ) : null}
             <LazySpotlight />
           </>
         );
@@ -291,7 +307,7 @@ const HeaderItem = ({
       <Tooltip label={board.name}>
         <HeaderButton href={`/boards/${encodeURIComponent(board.name)}`} aria-label={board.name}>
           <Avatar src={board.logoImageUrl} size={22} radius="sm">
-            <IconLayoutDashboard size={17} stroke={1.5} />
+            {getBoardInitial(board.name)}
           </Avatar>
         </HeaderButton>
       </Tooltip>
@@ -299,14 +315,7 @@ const HeaderItem = ({
   }
 
   if (item.id === "logo") {
-    return (
-      <HeaderLogo
-        display={logoDisplay}
-        logo={logo}
-        logoWithTitle={logoWithTitle}
-        label={label("logo")}
-      />
-    );
+    return <HeaderLogo display={logoDisplay} logo={logo} logoWithTitle={logoWithTitle} label={label("logo")} />;
   }
 
   if (item.id === "boardEdit") return boardEditAction;
@@ -416,3 +425,5 @@ const HeaderItem = ({
     </TourTarget>
   );
 };
+
+const getBoardInitial = (name: string) => Array.from(name.trim())[0]?.toLocaleUpperCase() ?? "?";

apps/nextjs/src/components/layout/header/lazy-spotlight.tsx

@@ -54,11 +54,13 @@ export const LazySpotlight = () => {
     };
   }, []);
 
-  return isMounted || isPreloaded ? (
+  if (!isMounted && !isPreloaded) return null;
+
+  return (
     <>
       {isPreloaded && <span hidden data-homarr-dev-benchmark-spotlight-preloaded />}
       {isMounted && <span hidden data-homarr-dev-benchmark-spotlight-mounted />}
-      <Spotlight />
+      {isMounted && <Spotlight />}
     </>
-  ) : null;
+  );
 };

apps/nextjs/src/components/layout/shell.tsx

@@ -22,12 +22,12 @@ export const ClientShell = ({
   const collapsed = useAtomValue(navigationCollapsedAtom);
   const backgroundProps = useOptionalBackgroundProps();
   const { headerPreferences } = useSettings();
-  const isHeaderVisible = hasHeader && headerPreferences.visible;
+  const headerHeight = headerPreferences.visible ? appShellHeaderHeight : { base: appShellHeaderHeight, sm: 0 };
 
   return (
     <AppShell
       {...backgroundProps}
-      header={isHeaderVisible ? { height: appShellHeaderHeight } : undefined}
+      header={hasHeader ? { height: headerHeight } : undefined}
       navbar={
         hasNavigation
           ? {

apps/nextjs/src/components/onboarding/manage-tour.tsx

@@ -4,7 +4,6 @@ import type { PropsWithChildren } from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import type { OnboardingTourFocusRevealProps, OnboardingTourStep } from "@gfazioli/mantine-onboarding-tour";
-import { useMediaQuery } from "@mantine/hooks";
 import {
   IconAffiliateFilled,
   IconAppsFilled,
@@ -16,6 +15,7 @@ import {
 import { clientApi } from "@homarr/api/client";
 import { createDocumentationLink } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
+import { useIsMobile } from "@homarr/ui/hooks";
 
 import { TourTargetsProvider } from "~/components/layout/header/tour-target";
 import { TourShell } from "./tour-shell";
@@ -48,7 +48,7 @@ const usersStepFocusRevealProps: OnboardingTourFocusRevealProps = {
 export const ManageTourProvider = ({ children, isAdmin }: ManageTourProviderProps) => {
   const t = useI18n("onboardingTour.manage");
   const { mutate: completeTour } = clientApi.user.completeTour.useMutation();
-  const isMobile = useMediaQuery("(max-width: 48em)");
+  const isMobile = useIsMobile();
   const pathname = usePathname();
   const router = useRouter();
 

apps/nextjs/src/components/workshop/workshop-report-form.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useState } from "react";
+import { Alert, Box, Button, CloseButton, Collapse, Group, Paper, Select, Stack, Text, Textarea } from "@mantine/core";
+
+import { showSuccessNotification } from "@homarr/notifications";
+import { useI18n } from "@homarr/translation/client";
+import type { WorkshopBackend } from "@homarr/workshop/backend";
+import { useWorkshopReportMutation } from "@homarr/workshop/backend";
+import type { WorkshopReport } from "@homarr/workshop/schema";
+
+const categories = ["outdated", "malicious", "spam", "copyright", "inappropriate", "other"] as const;
+
+interface WorkshopReportFormProps {
+  client: WorkshopBackend;
+  submissionId: string;
+  opened: boolean;
+  onClose(): void;
+}
+
+export function WorkshopReportForm({ client, submissionId, opened, onClose }: WorkshopReportFormProps) {
+  const t = useI18n("workshop");
+  const tCommon = useI18n("common");
+  const [category, setCategory] = useState<WorkshopReport["category"]>("other");
+  const [explanation, setExplanation] = useState("");
+  const report = useWorkshopReportMutation(client);
+
+  const close = () => {
+    setCategory("other");
+    setExplanation("");
+    report.reset();
+    onClose();
+  };
+
+  const submit = () =>
+    report.mutate(
+      { submission: submissionId, category, explanation },
+      {
+        onSuccess: () => {
+          showSuccessNotification({
+            title: t("reportSent"),
+            message: t("reportSentDescription"),
+          });
+          close();
+        },
+      },
+    );
+
+  return (
+    <Collapse id="workshop-report-form" expanded={opened}>
+      <Paper p="md">
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            submit();
+          }}
+        >
+          <Stack>
+            <Group justify="space-between" align="flex-start" wrap="nowrap">
+              <Box>
+                <Text fw={600}>{t("reportTitle")}</Text>
+                <Text size="sm" c="dimmed">
+                  {t("reportExplanation")}
+                </Text>
+              </Box>
+              <CloseButton aria-label={tCommon("action.close")} onClick={close} />
+            </Group>
+            <Select
+              label={t("reportReason")}
+              value={category}
+              onChange={(value) => setCategory((value as WorkshopReport["category"] | null) ?? "other")}
+              data={categories.map((value) => ({
+                value,
+                label: t(`reportCategory.${value}`),
+              }))}
+              allowDeselect={false}
+            />
+            <Textarea
+              label={t("reportExplanation")}
+              minRows={4}
+              autosize
+              value={explanation}
+              onChange={(event) => setExplanation(event.currentTarget.value)}
+            />
+            {report.error && <Alert color="red">{report.error.message}</Alert>}
+            <Group justify="flex-end" gap="sm">
+              <Button variant="default" onClick={close}>
+                {tCommon("action.cancel")}
+              </Button>
+              <Button type="submit" color="red" loading={report.isPending} disabled={explanation.trim().length < 3}>
+                {t("reportSend")}
+              </Button>
+            </Group>
+          </Stack>
+        </form>
+      </Paper>
+    </Collapse>
+  );
+}

apps/nextjs/src/components/workshop/workshop-report-modal.tsx

@@ -1,80 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Alert, Button, Group, Modal, Select, Stack, Textarea } from "@mantine/core";
-
-import { showSuccessNotification } from "@homarr/notifications";
-import { useI18n } from "@homarr/translation/client";
-import type { WorkshopBackend } from "@homarr/workshop/backend";
-import { useWorkshopReportMutation } from "@homarr/workshop/backend";
-import type { WorkshopReport } from "@homarr/workshop/schema";
-
-const categories = ["outdated", "malicious", "spam", "copyright", "inappropriate", "other"] as const;
-
-interface WorkshopReportModalProps {
-  client: WorkshopBackend;
-  submissionId: string;
-  opened: boolean;
-  onClose(): void;
-}
-
-export function WorkshopReportModal({ client, submissionId, opened, onClose }: WorkshopReportModalProps) {
-  const t = useI18n("workshop");
-  const tCommon = useI18n("common");
-  const [category, setCategory] = useState<WorkshopReport["category"]>("other");
-  const [explanation, setExplanation] = useState("");
-  const report = useWorkshopReportMutation(client);
-
-  const close = () => {
-    setExplanation("");
-    report.reset();
-    onClose();
-  };
-
-  const submit = () =>
-    report.mutate(
-      { submission: submissionId, category, explanation },
-      {
-        onSuccess: () => {
-          showSuccessNotification({
-            title: t("reportSent"),
-            message: t("reportSentDescription"),
-          });
-          close();
-        },
-      },
-    );
-
-  return (
-    <Modal opened={opened} onClose={close} title={t("reportTitle")} centered radius="md">
-      <Stack>
-        <Select
-          label={t("reportReason")}
-          value={category}
-          onChange={(value) => setCategory((value as WorkshopReport["category"] | null) ?? "other")}
-          data={categories.map((value) => ({
-            value,
-            label: t(`reportCategory.${value}`),
-          }))}
-          allowDeselect={false}
-        />
-        <Textarea
-          label={t("reportExplanation")}
-          minRows={4}
-          autosize
-          value={explanation}
-          onChange={(event) => setExplanation(event.currentTarget.value)}
-        />
-        {report.error && <Alert color="red">{report.error.message}</Alert>}
-        <Group justify="flex-end" gap="sm">
-          <Button variant="default" onClick={close}>
-            {tCommon("action.cancel")}
-          </Button>
-          <Button color="red" loading={report.isPending} disabled={explanation.trim().length < 3} onClick={submit}>
-            {t("reportSend")}
-          </Button>
-        </Group>
-      </Stack>
-    </Modal>
-  );
-}