Keep bot messages inside the column on narrow screens

Lists no longer add twui's 25px list margin on top of full width,
markdown blocks and list items are capped at the column, long words
and inline code wrap anywhere, and ref chips with long labels truncate
instead of pushing the line past the edge.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/pages/admin/bots/[bot_id]/(partials)/hook-proposal-ref-chip.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { twMerge } from "tailwind-merge";
 import Modal from "@moduletrace/twui/elements/Modal";
 import Button from "@moduletrace/twui/layout/Button";
 import H2 from "@moduletrace/twui/layout/H2";
@@ -43,13 +44,16 @@ export default function HookProposalRefChip({ proposal_id }: Props) {
                     color="gray"
                     size="smaller"
                     title={`Review: ${title}`}
-                    className="inline-flex h-6 gap-1.5! flex-nowrap align-middle px-2! text-[13px] font-bold text-ink whitespace-nowrap"
+                    className={twMerge(
+                        "inline-flex h-6 max-w-full gap-1.5! flex-nowrap align-middle px-2! text-[13px] font-bold text-ink whitespace-nowrap",
+                        "[&_.twui-button-content-wrapper]:min-w-0",
+                    )}
                 >
                     <Webhook size={14} aria-hidden className="shrink-0" />
-                    {`${title} · ${status}`}
+                    <Span className="min-w-0 truncate">{`${title} · ${status}`}</Span>
                 </Button>
             }
-            targetWrapperProps={{ className: "inline-flex align-middle" }}
+            targetWrapperProps={{ className: "inline-flex max-w-full align-middle" }}
             open={open}
             setOpen={setOpen}
             className="max-w-xl bg-paper p-6"