From 16091ffd0297308f6d94f4f125d31c5b18d258b2 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Thu, 14 May 2026 18:08:59 +0200
Subject: [PATCH] fix(onboarding): use consistent card width across all
 integration phases

The select, configure, and done phases each had different hardcoded
widths causing a jarring layout shift when transitioning between them.
Unify all three to a single CARD_WIDTH constant.
---
 .../init/_steps/integrations/init-integrations.tsx        | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/init/_steps/integrations/init-integrations.tsx b/apps/nextjs/src/app/[locale]/init/_steps/integrations/init-integrations.tsx
index 11363f2b2..f57abca4e 100644
--- a/apps/nextjs/src/app/[locale]/init/_steps/integrations/init-integrations.tsx
+++ b/apps/nextjs/src/app/[locale]/init/_steps/integrations/init-integrations.tsx
@@ -16,6 +16,8 @@ import { IntegrationMultiSelectGrid } from "~/components/integration/integration
 
 type Phase = "select" | "configure" | "done";
 
+const CARD_WIDTH = 64 * 16;
+
 export const InitIntegrations = () => {
   const [phase, setPhase] = useState<Phase>("select");
   const [selectedKinds, setSelectedKinds] = useState<IntegrationKind[]>([]);
@@ -55,7 +57,7 @@ export const InitIntegrations = () => {
 
   if (phase === "done") {
     return (
-      <Card w={64 * 8} maw="90vw" withBorder>
+      <Card w={CARD_WIDTH} maw="90vw" withBorder>
         <Center py="xl">
           <Stack align="center" gap="md">
             <Loader size="lg" />
@@ -72,7 +74,7 @@ export const InitIntegrations = () => {
     const progress = ((currentIndex + 1) / selectedKinds.length) * 100;
 
     return (
-      <Card w={64 * 14} maw="90vw" withBorder>
+      <Card w={CARD_WIDTH} maw="90vw" withBorder>
         <Stack>
           <Stack gap="xs">
             <Group gap="xs" justify="center">
@@ -99,7 +101,7 @@ export const InitIntegrations = () => {
   }
 
   return (
-    <Card w={64 * 16} maw="90vw" withBorder>
+    <Card w={CARD_WIDTH} maw="90vw" withBorder>
       <Stack>
         <Text>{t("description")}</Text>