Remove max-width constraint from bot detail pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: bchapuis

apps/app/src/components/workflow/widgets/input/whatsapp-account-create-dialog.tsx

@@ -28,11 +28,10 @@ const STEP_TITLES: Record<Step, string> = {
 const STEP_DESCRIPTIONS: Record<Step, string> = {
   name: "Choose a display name to identify this WhatsApp account in Dafthunk.",
   "app-secret":
-    "Copy the App Secret from your Meta app. Navigate to App Settings > Basic in the Meta Developer Portal.",
+    "Copy the App Secret from your Meta app. Navigate to Apps > App Settings > Basic in the Meta Developer Portal.",
   "api-credentials":
     "Copy your Access Token and Phone Number ID from the WhatsApp API Setup page in the Meta Developer Portal.",
-  setup:
-    "Your account is ready. Follow these steps to complete the setup.",
+  setup: "Your account is ready. Follow these steps to complete the setup.",
 };
 
 const META_PORTAL_URL = "https://developers.facebook.com/apps/";
@@ -169,7 +168,7 @@ export function WhatsAppAccountCreateDialog({
               <p className="text-xs text-muted-foreground">
                 Find this at{" "}
                 <span className="font-medium text-foreground">
-                  App Settings &gt; Basic
+                  Apps &gt; App Settings &gt; Basic
                 </span>{" "}
                 in the Meta Developer Portal. Click{" "}
                 <span className="font-medium text-foreground">Show</span> next
@@ -210,12 +209,12 @@ export function WhatsAppAccountCreateDialog({
               <p className="text-xs text-muted-foreground">
                 Find this at{" "}
                 <span className="font-medium text-foreground">
-                  WhatsApp &gt; API Setup
+                  Apps &gt; Use cases &gt; WhatsApp &gt; API Setup
                 </span>{" "}
                 under the temporary access token section, or generate a
                 permanent token via{" "}
                 <span className="font-medium text-foreground">
-                  Business Settings &gt; System Users
+                  Business &gt; Settings &gt; System Users
                 </span>
                 .
               </p>
@@ -237,7 +236,7 @@ export function WhatsAppAccountCreateDialog({
               <p className="text-xs text-muted-foreground">
                 Find this at{" "}
                 <span className="font-medium text-foreground">
-                  WhatsApp &gt; API Setup
+                  Apps &gt; Use cases &gt; WhatsApp &gt; API Setup
                 </span>
                 . Select your phone number from the dropdown — the numeric ID
                 appears below it. This is not the phone number itself.

apps/app/src/components/workflow/widgets/input/whatsapp-setup-info.tsx

@@ -21,8 +21,7 @@ export function WhatsAppSetupInfo() {
               Meta Developer Portal
             </span>{" "}
             webhook settings and subscribe to the{" "}
-            <span className="font-medium text-foreground">messages</span>{" "}
-            field.
+            <span className="font-medium text-foreground">messages</span> field.
           </li>
           <li>
             Enable the workflow, then send a WhatsApp message to your business

apps/app/src/pages/bot-discord-detail-page.tsx

@@ -54,7 +54,7 @@ export function BotDiscordDetailPage() {
 
   return (
     <InsetLayout title="Bot Details">
-      <div className="space-y-8 max-w-2xl">
+      <div className="space-y-8">
         <div className="flex justify-end">
           <Button
             variant="outline"

apps/app/src/pages/bot-telegram-detail-page.tsx

@@ -46,7 +46,7 @@ export function BotTelegramDetailPage() {
 
   return (
     <InsetLayout title="Bot Details">
-      <div className="space-y-8 max-w-2xl">
+      <div className="space-y-8">
         <div className="flex justify-end">
           <Button
             variant="outline"

apps/app/src/pages/bot-whatsapp-detail-page.tsx

@@ -62,7 +62,7 @@ export function BotWhatsAppDetailPage() {
 
   return (
     <InsetLayout title="Account Details">
-      <div className="space-y-8 max-w-2xl">
+      <div className="space-y-8">
         <div className="flex justify-end">
           <Button
             variant="outline"

apps/app/src/pages/bot-whatsapp-edit-dialog.tsx

@@ -52,7 +52,8 @@ export function BotWhatsAppEditDialog({
           phoneNumberId:
             phoneNumberId !== account.phoneNumberId ? phoneNumberId : undefined,
           appSecret: appSecret.trim() !== "" ? appSecret : undefined,
-          wabaId: wabaId !== (account.wabaId || "") ? wabaId || undefined : undefined,
+          wabaId:
+            wabaId !== (account.wabaId || "") ? wabaId || undefined : undefined,
         },
         organization.id
       );
@@ -110,7 +111,8 @@ export function BotWhatsAppEditDialog({
               placeholder="Leave empty to keep current secret"
             />
             <p className="text-xs text-muted-foreground">
-              Found at App Settings &gt; Basic in the Meta Developer Portal.
+              Found at Apps &gt; App Settings &gt; Basic in the Meta Developer
+              Portal.
             </p>
           </div>
 
@@ -124,8 +126,8 @@ export function BotWhatsAppEditDialog({
               placeholder="Leave empty to keep current token"
             />
             <p className="text-xs text-muted-foreground">
-              Found at WhatsApp &gt; API Setup, or via Business Settings &gt;
-              System Users for a permanent token.
+              Found at Apps &gt; Use cases &gt; WhatsApp &gt; API Setup, or via
+              Business Settings &gt; System Users for a permanent token.
             </p>
           </div>
 
@@ -137,7 +139,8 @@ export function BotWhatsAppEditDialog({
               onChange={(e) => setPhoneNumberId(e.target.value)}
             />
             <p className="text-xs text-muted-foreground">
-              Found at WhatsApp &gt; API Setup under the phone number dropdown.
+              Found at Apps &gt; Use cases &gt; WhatsApp &gt; API Setup under
+              the phone number dropdown.
             </p>
           </div>