From 3e78d51b567bf7a97e3ffd3c9ed416912b3a57e4 Mon Sep 17 00:00:00 2001
From: Benjamin Toby <devops@tben.me>
Date: Wed, 28 Oct 2026 06:23:09 +0100
Subject: [PATCH] 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 <noreply@anthropic.com>
---
 .../[bot_id]/(data)/message-markdown-components.tsx    |  4 ++--
 .../bots/[bot_id]/(data)/user-markdown-components.tsx  |  2 +-
 .../bots/[bot_id]/(partials)/bot-message-line.tsx      |  2 +-
 .../admin/bots/[bot_id]/(partials)/bot-ref-chip.tsx    |  7 ++++---
 .../bots/[bot_id]/(partials)/computer-ref-chip.tsx     |  5 +++--
 .../bots/[bot_id]/(partials)/crew-message-line.tsx     |  2 +-
 .../[bot_id]/(partials)/hook-proposal-ref-chip.tsx     | 10 +++++++---
 .../admin/bots/[bot_id]/(partials)/markdown-link.tsx   |  2 +-
 .../admin/bots/[bot_id]/(partials)/markdown-list.tsx   |  2 +-
 .../bots/[bot_id]/(partials)/proposal-ref-chip.tsx     | 10 +++++++---
 .../[bot_id]/(partials)/secret-request-ref-chip.tsx    | 10 +++++++---
 .../admin/bots/[bot_id]/(partials)/take-over-chip.tsx  |  8 ++++++--
 .../admin/bots/[bot_id]/(partials)/user-bubble.tsx     |  2 +-
 .../bots/[bot_id]/(partials)/user-markdown-link.tsx    |  2 +-
 .../bots/[bot_id]/(partials)/workspace-ref-chip.tsx    |  4 ++--
 15 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/src/pages/admin/bots/[bot_id]/(data)/message-markdown-components.tsx b/src/pages/admin/bots/[bot_id]/(data)/message-markdown-components.tsx
index e94217d..a9b94c7 100644
--- a/src/pages/admin/bots/[bot_id]/(data)/message-markdown-components.tsx
+++ b/src/pages/admin/bots/[bot_id]/(data)/message-markdown-components.tsx
@@ -42,7 +42,7 @@ export const MessageMarkdownComponents: Components = {
         </MarkdownList>
     ),
     code: ({ children }) => (
-        <Span className="font-mono text-[13px] px-1 py-px rounded-default-xs bg-sunken text-ink break-words">
+        <Span className="font-mono text-[13px] px-1 py-px rounded-default-xs bg-sunken text-ink wrap-anywhere">
             {children}
         </Span>
     ),
@@ -58,7 +58,7 @@ export const MessageMarkdownComponents: Components = {
     ),
     table: ({ children }) => (
         <Stack className="w-full max-w-full overflow-x-auto items-start">
-            <table className="text-[13px] leading-5 text-ink border-collapse">{children}</table>
+            <table className="text-[13px] leading-5 text-ink border-collapse wrap-break-word">{children}</table>
         </Stack>
     ),
     th: ({ children }) => (
diff --git a/src/pages/admin/bots/[bot_id]/(data)/user-markdown-components.tsx b/src/pages/admin/bots/[bot_id]/(data)/user-markdown-components.tsx
index 365ac65..7085a55 100644
--- a/src/pages/admin/bots/[bot_id]/(data)/user-markdown-components.tsx
+++ b/src/pages/admin/bots/[bot_id]/(data)/user-markdown-components.tsx
@@ -39,7 +39,7 @@ export const UserMarkdownComponents: Components = {
         </MarkdownList>
     ),
     code: ({ children }) => (
-        <Span className="font-mono text-[13px] px-1 py-px rounded-default-xs bg-on-ink/15 text-on-ink break-words">
+        <Span className="font-mono text-[13px] px-1 py-px rounded-default-xs bg-on-ink/15 text-on-ink wrap-anywhere">
             {children}
         </Span>
     ),
diff --git a/src/pages/admin/bots/[bot_id]/(partials)/bot-message-line.tsx b/src/pages/admin/bots/[bot_id]/(partials)/bot-message-line.tsx
index 77665e2..f536eb1 100644
--- a/src/pages/admin/bots/[bot_id]/(partials)/bot-message-line.tsx
+++ b/src/pages/admin/bots/[bot_id]/(partials)/bot-message-line.tsx
@@ -65,7 +65,7 @@ function BotMessageLine({ message, bot_name, at }: Props) {
             ) : null}
             <Stack
                 {...{ [QuotableAttribute]: "" }}
-                className="w-full gap-2.5! items-start break-words"
+                className="w-full gap-2.5! items-start wrap-anywhere [&>*]:max-w-full"
             >
                 <Markdown
                     remarkPlugins={RemarkPlugins}
diff --git a/src/pages/admin/bots/[bot_id]/(partials)/bot-ref-chip.tsx b/src/pages/admin/bots/[bot_id]/(partials)/bot-ref-chip.tsx
index 8df8b32..0e16c4f 100644
--- a/src/pages/admin/bots/[bot_id]/(partials)/bot-ref-chip.tsx
+++ b/src/pages/admin/bots/[bot_id]/(partials)/bot-ref-chip.tsx
@@ -35,7 +35,7 @@ export default function BotRefChip({ bot_id }: Props) {
                     : `/admin/bots/${bot.id}`
             }
             title={`Open ${bot.name}`}
-            className="inline-flex h-6 gap-1.5 items-center px-1.5 align-middle rounded-default-xs border-0 bg-sunken text-[13px] font-bold leading-4 text-ink whitespace-nowrap hover:opacity-80"
+            className="inline-flex h-6 max-w-full gap-1.5 items-center px-1.5 align-middle rounded-default-xs border-0 bg-sunken text-[13px] font-bold leading-4 text-ink whitespace-nowrap hover:opacity-80"
         >
             <BotAvatar
                 image_media_id={bot.image_media_id}
@@ -43,9 +43,10 @@ export default function BotRefChip({ bot_id }: Props) {
                 face={(bot.face || "idle") as BotFace}
                 label={bot.name || ""}
                 size={18}
+                className="shrink-0"
             />
-            {bot.name}
-            {workspace_id && bot.is_admin ? <AdminShield size={13} /> : null}
+            <Span className="min-w-0 truncate">{bot.name}</Span>
+            {workspace_id && bot.is_admin ? <AdminShield size={13} className="shrink-0" /> : null}
         </Link>
     );
 }
diff --git a/src/pages/admin/bots/[bot_id]/(partials)/computer-ref-chip.tsx b/src/pages/admin/bots/[bot_id]/(partials)/computer-ref-chip.tsx
index 81fc1f0..24b4767 100644
--- a/src/pages/admin/bots/[bot_id]/(partials)/computer-ref-chip.tsx
+++ b/src/pages/admin/bots/[bot_id]/(partials)/computer-ref-chip.tsx
@@ -38,14 +38,15 @@ export default function ComputerRefChip({ computer_id }: Props) {
                 openComputer({ computer_id: computer.id || 0, mode: "browser" })
             }
             className={twMerge(
-                "inline-flex h-6 gap-1.5! flex-nowrap align-middle px-2! text-[13px] font-bold whitespace-nowrap text-ink dark:text-ink",
+                "inline-flex h-6 max-w-full gap-1.5! flex-nowrap align-middle px-2! text-[13px] font-bold whitespace-nowrap text-ink dark:text-ink",
+                "[&_.twui-button-content-wrapper]:min-w-0",
                 current
                     ? "bg-sunken hover:bg-sunken outline-0"
                     : "bg-transparent hover:bg-sunken",
             )}
         >
             <Monitor size={14} aria-hidden className="shrink-0" />
-            {name}
+            <Span className="min-w-0 truncate">{name}</Span>
             {current ? <Check size={14} aria-hidden className="shrink-0" /> : null}
         </Button>
     );
diff --git a/src/pages/admin/bots/[bot_id]/(partials)/crew-message-line.tsx b/src/pages/admin/bots/[bot_id]/(partials)/crew-message-line.tsx
index f17ed17..dd97395 100644
--- a/src/pages/admin/bots/[bot_id]/(partials)/crew-message-line.tsx
+++ b/src/pages/admin/bots/[bot_id]/(partials)/crew-message-line.tsx
@@ -22,7 +22,7 @@ type Props = {
  */
 function CrewMessageLine({ message }: Props) {
     return (
-        <Stack className="w-full gap-2.5! items-start break-words">
+        <Stack className="w-full gap-2.5! items-start wrap-anywhere [&>*]:max-w-full">
             <Markdown remarkPlugins={RemarkPlugins} components={MessageMarkdownComponents}>
                 {linkComputerRefs({ text: message.text || "" })}
             </Markdown>
diff --git a/src/pages/admin/bots/[bot_id]/(partials)/hook-proposal-ref-chip.tsx b/src/pages/admin/bots/[bot_id]/(partials)/hook-proposal-ref-chip.tsx
index af11127..d976b34 100644
--- a/src/pages/admin/bots/[bot_id]/(partials)/hook-proposal-ref-chip.tsx
+++ b/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"
diff --git a/src/pages/admin/bots/[bot_id]/(partials)/markdown-link.tsx b/src/pages/admin/bots/[bot_id]/(partials)/markdown-link.tsx
index 018bdd1..379dd4d 100644
--- a/src/pages/admin/bots/[bot_id]/(partials)/markdown-link.tsx
+++ b/src/pages/admin/bots/[bot_id]/(partials)/markdown-link.tsx
@@ -121,7 +121,7 @@ export default function MarkdownLink({ href, children }: ComponentProps<"a">) {
             href={href}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-ink underline underline-offset-2 hover:opacity-80 break-words"
+            className="text-ink underline underline-offset-2 hover:opacity-80 wrap-anywhere"
         >
             {children}
         </Link>
diff --git a/src/pages/admin/bots/[bot_id]/(partials)/markdown-list.tsx b/src/pages/admin/bots/[bot_id]/(partials)/markdown-list.tsx
index c026acb..fba60a1 100644
--- a/src/pages/admin/bots/[bot_id]/(partials)/markdown-list.tsx
+++ b/src/pages/admin/bots/[bot_id]/(partials)/markdown-list.tsx
@@ -26,7 +26,7 @@ export default function MarkdownList({ children, ordered, start, className }: Pr
             start={start}
             items={items}
             className={twMerge(
-                `w-full gap-1! pl-5 my-0 text-sm leading-5 text-ink ${ordered ? "list-decimal" : "list-disc"}`,
+                `self-stretch gap-1! pl-5 my-0 text-sm leading-5 text-ink [&>li]:max-w-full ${ordered ? "list-decimal" : "list-disc"}`,
                 className,
             )}
         />
diff --git a/src/pages/admin/bots/[bot_id]/(partials)/proposal-ref-chip.tsx b/src/pages/admin/bots/[bot_id]/(partials)/proposal-ref-chip.tsx
index de37b5b..362bee4 100644
--- a/src/pages/admin/bots/[bot_id]/(partials)/proposal-ref-chip.tsx
+++ b/src/pages/admin/bots/[bot_id]/(partials)/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";
@@ -47,13 +48,16 @@ export default function ProposalRefChip({ 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",
+                    )}
                 >
                     <Icon 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"
diff --git a/src/pages/admin/bots/[bot_id]/(partials)/secret-request-ref-chip.tsx b/src/pages/admin/bots/[bot_id]/(partials)/secret-request-ref-chip.tsx
index 88341c5..de34dcc 100644
--- a/src/pages/admin/bots/[bot_id]/(partials)/secret-request-ref-chip.tsx
+++ b/src/pages/admin/bots/[bot_id]/(partials)/secret-request-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";
@@ -46,13 +47,16 @@ export default function SecretRequestRefChip({ request_id }: Props) {
                     color="gray"
                     size="smaller"
                     title={view.status == "pending" ? `Enter ${view.key}` : `${view.key}: ${status}`}
-                    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",
+                    )}
                 >
                     <KeyRound size={14} aria-hidden className="shrink-0" />
-                    {`${view.key} · ${status}`}
+                    <Span className="min-w-0 truncate">{`${view.key} · ${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"
diff --git a/src/pages/admin/bots/[bot_id]/(partials)/take-over-chip.tsx b/src/pages/admin/bots/[bot_id]/(partials)/take-over-chip.tsx
index 2c237db..bf29ab5 100644
--- a/src/pages/admin/bots/[bot_id]/(partials)/take-over-chip.tsx
+++ b/src/pages/admin/bots/[bot_id]/(partials)/take-over-chip.tsx
@@ -1,4 +1,5 @@
 import { useContext } from "react";
+import { twMerge } from "tailwind-merge";
 import Button from "@moduletrace/twui/layout/Button";
 import Span from "@moduletrace/twui/layout/Span";
 import { Hand } from "lucide-react";
@@ -34,10 +35,13 @@ export default function TakeOverChip({ computer_id, mode }: Props) {
             size="smaller"
             title={`Open ${name} (${mode_title}) and take over`}
             onClick={() => openComputer({ computer_id, mode, take_over: true })}
-            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",
+            )}
         >
             <Hand size={14} aria-hidden className="shrink-0" />
-            {`Take over ${name} · ${mode_title}`}
+            <Span className="min-w-0 truncate">{`Take over ${name} · ${mode_title}`}</Span>
         </Button>
     );
 }
diff --git a/src/pages/admin/bots/[bot_id]/(partials)/user-bubble.tsx b/src/pages/admin/bots/[bot_id]/(partials)/user-bubble.tsx
index b44e48b..22215cb 100644
--- a/src/pages/admin/bots/[bot_id]/(partials)/user-bubble.tsx
+++ b/src/pages/admin/bots/[bot_id]/(partials)/user-bubble.tsx
@@ -25,7 +25,7 @@ export default function UserBubble({ text }: { text: string }) {
             {...{ [QuotableAttribute]: "" }}
             className={twMerge(
                 "max-w-[80%] min-w-0 gap-2.5! items-stretch rounded-default-lg",
-                "bg-ink text-on-ink px-4 py-3 text-sm leading-5 break-words",
+                "bg-ink text-on-ink px-4 py-3 text-sm leading-5 wrap-anywhere",
                 "conversation-user-bubble",
             )}
         >
diff --git a/src/pages/admin/bots/[bot_id]/(partials)/user-markdown-link.tsx b/src/pages/admin/bots/[bot_id]/(partials)/user-markdown-link.tsx
index 8e863f0..a6134bf 100644
--- a/src/pages/admin/bots/[bot_id]/(partials)/user-markdown-link.tsx
+++ b/src/pages/admin/bots/[bot_id]/(partials)/user-markdown-link.tsx
@@ -14,7 +14,7 @@ export default function UserMarkdownLink(props: ComponentProps<"a">) {
             href={props.href}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-blue-400 dark:text-blue-600 underline underline-offset-2 hover:opacity-80 break-words"
+            className="text-blue-400 dark:text-blue-600 underline underline-offset-2 hover:opacity-80 wrap-anywhere"
         >
             {props.children}
         </Link>
diff --git a/src/pages/admin/bots/[bot_id]/(partials)/workspace-ref-chip.tsx b/src/pages/admin/bots/[bot_id]/(partials)/workspace-ref-chip.tsx
index ed001d8..59862b2 100644
--- a/src/pages/admin/bots/[bot_id]/(partials)/workspace-ref-chip.tsx
+++ b/src/pages/admin/bots/[bot_id]/(partials)/workspace-ref-chip.tsx
@@ -24,10 +24,10 @@ export default function WorkspaceRefChip({ workspace_id }: Props) {
         <Link
             href={`/admin/workspaces/${workspace.id}`}
             title={`Open ${workspace.name}`}
-            className="inline-flex h-6 gap-1.5 items-center px-1.5 align-middle rounded-default-xs border-0 bg-sunken text-[13px] font-bold leading-4 text-ink whitespace-nowrap hover:opacity-80"
+            className="inline-flex h-6 max-w-full gap-1.5 items-center px-1.5 align-middle rounded-default-xs border-0 bg-sunken text-[13px] font-bold leading-4 text-ink whitespace-nowrap hover:opacity-80"
         >
             <WorkspaceAvatar image_media_id={workspace.image_media_id} size="xs" />
-            {workspace.name}
+            <Span className="min-w-0 truncate">{workspace.name}</Span>
         </Link>
     );
 }