diff --git a/web/src/app/home/bots/BotDetailContent.tsx b/web/src/app/home/bots/BotDetailContent.tsx
index cdef10c7a..ca1c64fa8 100644
--- a/web/src/app/home/bots/BotDetailContent.tsx
+++ b/web/src/app/home/bots/BotDetailContent.tsx
@@ -255,7 +255,7 @@ export default function BotDetailContent({ id }: { id: string }) {
             value="config"
             className="mt-4 min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden"
           >
-            <div className="mx-auto w-full min-w-0 max-w-3xl space-y-6 pb-8">
+            <div className="mx-auto flex w-full min-w-0 max-w-3xl flex-col gap-6 pb-8">
               <fieldset className="contents" disabled={!canManage}>
                 <BotForm
                   initBotId={id}
diff --git a/web/tests/e2e/crud-smoke.spec.ts b/web/tests/e2e/crud-smoke.spec.ts
index 814407755..0a2f101f8 100644
--- a/web/tests/e2e/crud-smoke.spec.ts
+++ b/web/tests/e2e/crud-smoke.spec.ts
@@ -360,6 +360,20 @@ test.describe('bot advanced flows', () => {
       page.getByText('Events that match no route are ignored.'),
     ).toHaveCount(0);
 
+    const routingCard = page
+      .locator('[data-slot="card"]')
+      .filter({ has: page.getByText('Event Routing', { exact: true }) });
+    const dangerCard = page
+      .locator('[data-slot="card"]')
+      .filter({ has: page.getByText('Danger Zone', { exact: true }) });
+    const routingBox = await routingCard.boundingBox();
+    const dangerBox = await dangerCard.boundingBox();
+    expect(routingBox).not.toBeNull();
+    expect(dangerBox).not.toBeNull();
+    expect(
+      dangerBox!.y - (routingBox!.y + routingBox!.height),
+    ).toBeGreaterThanOrEqual(20);
+
     await page.getByRole('button', { name: 'Refresh status' }).hover();
     await expect(
       page.getByText('Failed to refresh route status.'),