fix: address responsive layout review

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

@@ -3,6 +3,7 @@
 import { Box, Paper, Stack, Text } from "@mantine/core";
 
 import { useCurrentLayout, useLayoutOverride, useRequiredBoard } from "@homarr/boards/context";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import { getRepresentativeLayoutWidth } from "../_layout-utils";
 import { BoardCategorySection } from "~/components/board/sections/category-section";
@@ -11,6 +12,7 @@ import { BoardBackgroundVideo } from "~/components/layout/background";
 
 export const ClientBoard = () => {
   const board = useRequiredBoard();
+  const tPreview = useScopedI18n("board.setting.section.layout.preview");
   const currentLayoutId = useCurrentLayout();
   const layoutOverrideId = useLayoutOverride();
 
@@ -42,7 +44,7 @@ export const ClientBoard = () => {
   return (
     <Stack align="center" gap="xs" p="md" mih="100%">
       <Text size="xs" c="dimmed" fw={500}>
-        {currentLayout.name} · {representativeWidth}px
+        {tPreview("editorWidthLabel", { layoutName: currentLayout.name, width: representativeWidth })}
       </Text>
       <Paper
         withBorder

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

@@ -21,6 +21,7 @@ import { clientApi } from "@homarr/api/client";
 import { createId } from "@homarr/common";
 import type { UseFormReturnType } from "@homarr/form";
 import { useConfirmModal } from "@homarr/modals";
+import { showErrorNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
 
 import { SectionCard } from "~/components/manage/section-card";
@@ -42,7 +43,14 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
   const { openConfirmModal } = useConfirmModal();
   const [editingLayoutId, setEditingLayoutId] = useState<string | null>(null);
   const [resettingLayoutId, setResettingLayoutId] = useState<string | null>(null);
-  const { mutateAsync: resetLayout } = clientApi.board.resetLayout.useMutation();
+  const { mutateAsync: resetLayout } = clientApi.board.resetLayout.useMutation({
+    onError() {
+      showErrorNotification({
+        title: t("common.notification.update.error"),
+        message: t("common.notification.update.error"),
+      });
+    },
+  });
   const appIds = useMemo(
     () =>
       Array.from(
@@ -86,6 +94,8 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
             await resetLayout({ boardId: board.id, layoutId: canonicalLayout.id });
             await utils.board.getBoardByName.invalidate({ name: board.name });
             router.refresh();
+          } catch {
+            // The mutation callback displays the error notification.
           } finally {
             setResettingLayoutId(null);
           }