From 1065e30c8d2075da928056945eeb4c065e3d3702 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Thu, 28 May 2026 12:15:44 +0200
Subject: [PATCH] feat(init): unify onboarding step widths with shared layout

Replace per-step hardcoded Card widths (384px, 776px, 1024px) with a
consistent 1024px shell defined in _constants.ts. All steps now use an
InitStepCard wrapper set to w=100%, inheriting width from the page shell.

Also updates old-import cards to w=100% for proper width propagation.
---
 .../[locale]/init/_components/init-step-card.tsx   | 12 ++++++++++++
 apps/nextjs/src/app/[locale]/init/_constants.ts    |  2 ++
 .../[locale]/init/_steps/finish/init-finish.tsx    |  8 +++++---
 .../app/[locale]/init/_steps/group/init-group.tsx  |  8 +++++---
 .../[locale]/init/_steps/import/file-info-card.tsx |  8 +++++---
 .../[locale]/init/_steps/import/init-import.tsx    |  9 +++++----
 .../init/_steps/settings/init-settings.tsx         | 14 ++++++++------
 .../app/[locale]/init/_steps/start/init-start.tsx  |  7 ++++---
 .../app/[locale]/init/_steps/user/init-user.tsx    |  7 +++----
 apps/nextjs/src/app/[locale]/init/page.tsx         |  3 ++-
 .../src/components/initial-oldmarr-import.tsx      |  2 +-
 .../components/initial/board-selection-card.tsx    |  2 +-
 .../components/initial/import-settings-card.tsx    |  2 +-
 .../src/components/initial/import-summary-card.tsx |  2 +-
 14 files changed, 55 insertions(+), 31 deletions(-)
 create mode 100644 apps/nextjs/src/app/[locale]/init/_components/init-step-card.tsx
 create mode 100644 apps/nextjs/src/app/[locale]/init/_constants.ts

diff --git a/apps/nextjs/src/app/[locale]/init/_components/init-step-card.tsx b/apps/nextjs/src/app/[locale]/init/_components/init-step-card.tsx
new file mode 100644
index 000000000..e51149147
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/init/_components/init-step-card.tsx
@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from "react";
+import { Card } from "@mantine/core";
+
+interface InitStepCardProps {
+  withBorder?: boolean;
+}
+
+export const InitStepCard = ({ children, withBorder = true }: PropsWithChildren<InitStepCardProps>) => (
+  <Card w="100%" withBorder={withBorder}>
+    {children}
+  </Card>
+);
diff --git a/apps/nextjs/src/app/[locale]/init/_constants.ts b/apps/nextjs/src/app/[locale]/init/_constants.ts
new file mode 100644
index 000000000..870cbdc21
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/init/_constants.ts
@@ -0,0 +1,2 @@
+export const onboardingContentWidth = 64 * 16;
+export const onboardingMaxWidth = "90vw";
diff --git a/apps/nextjs/src/app/[locale]/init/_steps/finish/init-finish.tsx b/apps/nextjs/src/app/[locale]/init/_steps/finish/init-finish.tsx
index 477cf6d46..ff7c2042a 100644
--- a/apps/nextjs/src/app/[locale]/init/_steps/finish/init-finish.tsx
+++ b/apps/nextjs/src/app/[locale]/init/_steps/finish/init-finish.tsx
@@ -1,5 +1,5 @@
 import type { MantineColor } from "@mantine/core";
-import { Button, Card, Stack, Text } from "@mantine/core";
+import { Button, Stack, Text } from "@mantine/core";
 import { IconBook2, IconLayoutDashboard, IconMailForward } from "@tabler/icons-react";
 
 import { isProviderEnabled } from "@homarr/auth/server";
@@ -9,11 +9,13 @@ import { getScopedI18n } from "@homarr/translation/server";
 import { Link } from "@homarr/ui";
 import type { TablerIcon } from "@homarr/ui";
 
+import { InitStepCard } from "../../_components/init-step-card";
+
 export const InitFinish = async () => {
   const tFinish = await getScopedI18n("init.step.finish");
 
   return (
-    <Card w={64 * 6} maw="90vw">
+    <InitStepCard>
       <Stack>
         <Text>{tFinish("description")}</Text>
 
@@ -37,7 +39,7 @@ export const InitFinish = async () => {
           {tFinish("action.docs")}
         </ExternalLinkButton>
       </Stack>
-    </Card>
+    </InitStepCard>
   );
 };
 
diff --git a/apps/nextjs/src/app/[locale]/init/_steps/group/init-group.tsx b/apps/nextjs/src/app/[locale]/init/_steps/group/init-group.tsx
index 94424ef7d..98602de73 100644
--- a/apps/nextjs/src/app/[locale]/init/_steps/group/init-group.tsx
+++ b/apps/nextjs/src/app/[locale]/init/_steps/group/init-group.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Card, Stack, TextInput } from "@mantine/core";
+import { Button, Stack, TextInput } from "@mantine/core";
 import { IconArrowRight } from "@tabler/icons-react";
 import type { z } from "zod/v4";
 
@@ -10,6 +10,8 @@ import { useZodForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
 import { groupCreateSchema } from "@homarr/validation/group";
 
+import { InitStepCard } from "../../_components/init-step-card";
+
 export const InitGroup = () => {
   const t = useI18n();
   const { mutateAsync } = clientApi.group.createInitialExternalGroup.useMutation({
@@ -34,7 +36,7 @@ export const InitGroup = () => {
   };
 
   return (
-    <Card w={64 * 6} maw="90vw">
+    <InitStepCard>
       <form onSubmit={form.onSubmit(handleSubmitAsync)}>
         <Stack>
           <TextInput
@@ -48,6 +50,6 @@ export const InitGroup = () => {
           </Button>
         </Stack>
       </form>
-    </Card>
+    </InitStepCard>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/init/_steps/import/file-info-card.tsx b/apps/nextjs/src/app/[locale]/init/_steps/import/file-info-card.tsx
index 3acbe646b..8a3a14fb4 100644
--- a/apps/nextjs/src/app/[locale]/init/_steps/import/file-info-card.tsx
+++ b/apps/nextjs/src/app/[locale]/init/_steps/import/file-info-card.tsx
@@ -1,10 +1,12 @@
-import { ActionIcon, Button, Card, Group, Text } from "@mantine/core";
+import { ActionIcon, Button, Group, Text } from "@mantine/core";
 import type { FileWithPath } from "@mantine/dropzone";
 import { IconPencil } from "@tabler/icons-react";
 
 import { humanFileSize } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import { InitStepCard } from "../../_components/init-step-card";
+
 interface FileInfoCardProps {
   file: FileWithPath;
   onRemove: () => void;
@@ -13,7 +15,7 @@ interface FileInfoCardProps {
 export const FileInfoCard = ({ file, onRemove }: FileInfoCardProps) => {
   const tFileInfo = useScopedI18n("init.step.import.fileInfo");
   return (
-    <Card w={64 * 12 + 8} maw="90vw" withBorder={false}>
+    <InitStepCard withBorder={false}>
       <Group justify="space-between" align="center" wrap="nowrap">
         <Group>
           <Text fw={500} lineClamp={1} style={{ wordBreak: "break-all" }}>
@@ -36,6 +38,6 @@ export const FileInfoCard = ({ file, onRemove }: FileInfoCardProps) => {
           <IconPencil size={16} stroke={1.5} />
         </ActionIcon>
       </Group>
-    </Card>
+    </InitStepCard>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/init/_steps/import/init-import.tsx b/apps/nextjs/src/app/[locale]/init/_steps/import/init-import.tsx
index cdb3faf50..c7113b66b 100644
--- a/apps/nextjs/src/app/[locale]/init/_steps/import/init-import.tsx
+++ b/apps/nextjs/src/app/[locale]/init/_steps/import/init-import.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import { startTransition, useState } from "react";
-import { Card, Stack } from "@mantine/core";
+import { Stack } from "@mantine/core";
 import type { FileWithPath } from "@mantine/dropzone";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { InitialOldmarrImport } from "@homarr/old-import/components";
 
+import { InitStepCard } from "../../_components/init-step-card";
 import { FileInfoCard } from "./file-info-card";
 import { ImportDropZone } from "./import-dropzone";
 
@@ -20,7 +21,7 @@ export const InitImport = () => {
 
   if (!file) {
     return (
-      <Card w={64 * 12 + 8} maw="90vw">
+      <InitStepCard>
         <ImportDropZone
           loading={isPending}
           updateFile={(file) => {
@@ -40,12 +41,12 @@ export const InitImport = () => {
             });
           }}
         />
-      </Card>
+      </InitStepCard>
     );
   }
 
   return (
-    <Stack mb="sm">
+    <Stack w="100%" mb="sm">
       <FileInfoCard file={file} onRemove={() => setFile(null)} />
       {analyseResult !== null && <InitialOldmarrImport file={file} analyseResult={analyseResult} />}
     </Stack>
diff --git a/apps/nextjs/src/app/[locale]/init/_steps/settings/init-settings.tsx b/apps/nextjs/src/app/[locale]/init/_steps/settings/init-settings.tsx
index cb024fc2f..5c99d651c 100644
--- a/apps/nextjs/src/app/[locale]/init/_steps/settings/init-settings.tsx
+++ b/apps/nextjs/src/app/[locale]/init/_steps/settings/init-settings.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Card, Group, Stack, Switch, Text } from "@mantine/core";
+import { Button, Group, Stack, Switch, Text } from "@mantine/core";
 import { IconArrowRight } from "@tabler/icons-react";
 import type { z } from "zod/v4";
 
@@ -13,6 +13,8 @@ import type { TranslationObject } from "@homarr/translation";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { settingsInitSchema } from "@homarr/validation/settings";
 
+import { InitStepCard } from "../../_components/init-step-card";
+
 export const InitSettings = () => {
   const tSection = useScopedI18n("management.page.settings.section");
   const t = useI18n();
@@ -29,8 +31,8 @@ export const InitSettings = () => {
 
   return (
     <form onSubmit={form.onSubmit(handleSubmitAsync)}>
-      <Stack>
-        <Card w={64 * 12 + 8} maw="90vw">
+      <Stack w="100%">
+        <InitStepCard>
           <Stack gap="sm">
             <Text fw={500}>{tSection("analytics.title")}</Text>
 
@@ -38,8 +40,8 @@ export const InitSettings = () => {
               <AnalyticsRow kind="general" {...form.getInputProps("analytics.enableGeneral", { type: "checkbox" })} />
             </Stack>
           </Stack>
-        </Card>
-        <Card w={64 * 12 + 8} maw="90vw">
+        </InitStepCard>
+        <InitStepCard>
           <Stack gap="sm">
             <Text fw={500}>{tSection("crawlingAndIndexing.title")}</Text>
 
@@ -62,7 +64,7 @@ export const InitSettings = () => {
               />
             </Stack>
           </Stack>
-        </Card>
+        </InitStepCard>
 
         <Button type="submit" loading={form.submitting} rightSection={<IconArrowRight size={16} stroke={1.5} />}>
           {t("common.action.continue")}
diff --git a/apps/nextjs/src/app/[locale]/init/_steps/start/init-start.tsx b/apps/nextjs/src/app/[locale]/init/_steps/start/init-start.tsx
index da858f1f4..d63c95331 100644
--- a/apps/nextjs/src/app/[locale]/init/_steps/start/init-start.tsx
+++ b/apps/nextjs/src/app/[locale]/init/_steps/start/init-start.tsx
@@ -1,16 +1,17 @@
-import { Card, Stack, Text } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
 import { IconFileImport, IconPlayerPlay } from "@tabler/icons-react";
 
 import { getMantineColor } from "@homarr/common";
 import { getScopedI18n } from "@homarr/translation/server";
 
+import { InitStepCard } from "../../_components/init-step-card";
 import { InitStartButton } from "./next-button";
 
 export const InitStart = async () => {
   const tStart = await getScopedI18n("init.step.start");
 
   return (
-    <Card w={64 * 6} maw="90vw">
+    <InitStepCard>
       <Stack>
         <Text>{tStart("description")}</Text>
 
@@ -27,6 +28,6 @@ export const InitStart = async () => {
           {tStart("action.importOldmarr")}
         </InitStartButton>
       </Stack>
-    </Card>
+    </InitStepCard>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/init/_steps/user/init-user.tsx b/apps/nextjs/src/app/[locale]/init/_steps/user/init-user.tsx
index fa0ed777d..16760cd4c 100644
--- a/apps/nextjs/src/app/[locale]/init/_steps/user/init-user.tsx
+++ b/apps/nextjs/src/app/[locale]/init/_steps/user/init-user.tsx
@@ -1,11 +1,10 @@
-import { Card } from "@mantine/core";
-
+import { InitStepCard } from "../../_components/init-step-card";
 import { InitUserForm } from "./init-user-form";
 
 export const InitUser = () => {
   return (
-    <Card w={64 * 6} maw="90vw">
+    <InitStepCard>
       <InitUserForm />
-    </Card>
+    </InitStepCard>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/init/page.tsx b/apps/nextjs/src/app/[locale]/init/page.tsx
index 61dd1025f..212c74e73 100644
--- a/apps/nextjs/src/app/[locale]/init/page.tsx
+++ b/apps/nextjs/src/app/[locale]/init/page.tsx
@@ -9,6 +9,7 @@ import { getScopedI18n } from "@homarr/translation/server";
 import { CurrentColorSchemeCombobox } from "~/components/color-scheme/current-color-scheme-combobox";
 import { CurrentLanguageCombobox } from "~/components/language/current-language-combobox";
 import { HomarrLogoWithTitle } from "~/components/layout/logo/homarr-logo";
+import { onboardingContentWidth, onboardingMaxWidth } from "./_constants";
 import { BackToStart } from "./_steps/back";
 import { InitFinish } from "./_steps/finish/init-finish";
 import { InitGroup } from "./_steps/group/init-group";
@@ -37,7 +38,7 @@ export default async function InitPage() {
   return (
     <Box mih="100dvh">
       <Center>
-        <Stack align="center" mt="xl">
+        <Stack align="center" mt="xl" w={onboardingContentWidth} maw={onboardingMaxWidth}>
           <HomarrLogoWithTitle size="lg" />
           <Stack gap={6} align="center">
             <Title order={3} fw={400} ta="center">
diff --git a/packages/old-import/src/components/initial-oldmarr-import.tsx b/packages/old-import/src/components/initial-oldmarr-import.tsx
index a87a8f651..92aa301a5 100644
--- a/packages/old-import/src/components/initial-oldmarr-import.tsx
+++ b/packages/old-import/src/components/initial-oldmarr-import.tsx
@@ -69,7 +69,7 @@ export const InitialOldmarrImport = ({ file, analyseResult }: InitialOldmarrImpo
   };
 
   return (
-    <Stack mb="sm">
+    <Stack w="100%" mb="sm">
       <ImportSettingsCard
         settings={settings}
         updateSetting={(setting, value) => {
diff --git a/packages/old-import/src/components/initial/board-selection-card.tsx b/packages/old-import/src/components/initial/board-selection-card.tsx
index 4665ec2cd..6f178f669 100644
--- a/packages/old-import/src/components/initial/board-selection-card.tsx
+++ b/packages/old-import/src/components/initial/board-selection-card.tsx
@@ -38,7 +38,7 @@ export const BoardSelectionCard = ({ selections, updateSelections }: BoardSelect
   }
 
   return (
-    <Card w={64 * 12 + 8} maw="90vw" withBorder={false}>
+    <Card w="100%" withBorder={false}>
       <Stack gap="sm">
         <Stack gap={0}>
           <Group justify="space-between" align="center">
diff --git a/packages/old-import/src/components/initial/import-settings-card.tsx b/packages/old-import/src/components/initial/import-settings-card.tsx
index 1a2809d76..f230ff921 100644
--- a/packages/old-import/src/components/initial/import-settings-card.tsx
+++ b/packages/old-import/src/components/initial/import-settings-card.tsx
@@ -17,7 +17,7 @@ interface ImportSettingsCardProps {
 export const ImportSettingsCard = ({ settings, updateSetting }: ImportSettingsCardProps) => {
   const tImportSettings = useScopedI18n("init.step.import.importSettings");
   return (
-    <Card w={64 * 12 + 8} maw="90vw" withBorder={false}>
+    <Card w="100%" withBorder={false}>
       <Stack gap="sm">
         <Stack gap={0}>
           <Text fw={500}>{tImportSettings("title")}</Text>
diff --git a/packages/old-import/src/components/initial/import-summary-card.tsx b/packages/old-import/src/components/initial/import-summary-card.tsx
index 9993b3ac2..1000b35a6 100644
--- a/packages/old-import/src/components/initial/import-summary-card.tsx
+++ b/packages/old-import/src/components/initial/import-summary-card.tsx
@@ -13,7 +13,7 @@ interface ImportSummaryCardProps {
 export const ImportSummaryCard = ({ counts, onSubmit, loading }: ImportSummaryCardProps) => {
   const tSummary = useScopedI18n("init.step.import.summary");
   return (
-    <Card w={64 * 12 + 8} maw="90vw" withBorder={false}>
+    <Card w="100%" withBorder={false}>
       <Stack gap="sm">
         <Stack gap={0}>
           <Text fw={500}>{tSummary("title")}</Text>