Fix long-string wrapping in markdown comments

(cherry picked from commit d4919e6894741ff5c93d54e157731bfbdd1aa77d)

ui/src/components/MarkdownBody.test.tsx

@@ -173,7 +173,7 @@ describe("MarkdownBody", () => {
     ]);
 
     expect(html).toContain('href="/issues/PAP-1271"');
-    expect(html).toContain("<code>PAP-1271</code>");
+    expect(html).toContain('<code style="overflow-wrap:anywhere;word-break:break-word">PAP-1271</code>');
     expect(html).toContain("text-green-600");
   });
 
@@ -192,4 +192,19 @@ describe("MarkdownBody", () => {
     expect(html).toContain("Depends on PAP-1271");
     expect(html).toContain('href="PAP-1271"');
   });
+
+  it("applies wrap-friendly styles to long inline content", () => {
+    const html = renderMarkdown("averyveryveryveryveryveryveryveryveryverylongtoken");
+
+    expect(html).toContain('class="paperclip-markdown prose prose-sm min-w-0 max-w-full break-words overflow-hidden');
+    expect(html).toContain('style="overflow-wrap:anywhere;word-break:break-word"');
+    expect(html).toContain("<p");
+  });
+
+  it("applies wrap-friendly styles to long links", () => {
+    const html = renderMarkdown("[link](https://example.com/reallyreallyreallyreallyreallyreallyreallyreallylong)");
+
+    expect(html).toContain('<a href="https://example.com/reallyreallyreallyreallyreallyreallyreallyreallylong"');
+    expect(html).toContain('style="overflow-wrap:anywhere;word-break:break-word"');
+  });
 });

ui/src/components/MarkdownBody.tsx

@@ -56,6 +56,18 @@ function loadMermaid() {
   return mermaidLoaderPromise;
 }
 
+const wrapAnywhereStyle: React.CSSProperties = {
+  overflowWrap: "anywhere",
+  wordBreak: "break-word",
+};
+
+function mergeWrapStyle(style?: React.CSSProperties): React.CSSProperties {
+  return {
+    ...wrapAnywhereStyle,
+    ...style,
+  };
+}
+
 function flattenText(value: ReactNode): string {
   if (value == null) return "";
   if (typeof value === "string" || typeof value === "number") return String(value);
@@ -148,6 +160,31 @@ export function MarkdownBody({
     remarkPlugins.push(remarkSoftBreaks);
   }
   const components: Components = {
+    p: ({ node: _node, style: paragraphStyle, children: paragraphChildren, ...paragraphProps }) => (
+      <p {...paragraphProps} style={mergeWrapStyle(paragraphStyle as React.CSSProperties | undefined)}>
+        {paragraphChildren}
+      </p>
+    ),
+    li: ({ node: _node, style: listItemStyle, children: listItemChildren, ...listItemProps }) => (
+      <li {...listItemProps} style={mergeWrapStyle(listItemStyle as React.CSSProperties | undefined)}>
+        {listItemChildren}
+      </li>
+    ),
+    blockquote: ({ node: _node, style: blockquoteStyle, children: blockquoteChildren, ...blockquoteProps }) => (
+      <blockquote {...blockquoteProps} style={mergeWrapStyle(blockquoteStyle as React.CSSProperties | undefined)}>
+        {blockquoteChildren}
+      </blockquote>
+    ),
+    td: ({ node: _node, style: tableCellStyle, children: tableCellChildren, ...tableCellProps }) => (
+      <td {...tableCellProps} style={mergeWrapStyle(tableCellStyle as React.CSSProperties | undefined)}>
+        {tableCellChildren}
+      </td>
+    ),
+    th: ({ node: _node, style: tableHeaderStyle, children: tableHeaderChildren, ...tableHeaderProps }) => (
+      <th {...tableHeaderProps} style={mergeWrapStyle(tableHeaderStyle as React.CSSProperties | undefined)}>
+        {tableHeaderChildren}
+      </th>
+    ),
     pre: ({ node: _node, children: preChildren, ...preProps }) => {
       const mermaidSource = extractMermaidSource(preChildren);
       if (mermaidSource) {
@@ -155,7 +192,12 @@ export function MarkdownBody({
       }
       return <pre {...preProps}>{preChildren}</pre>;
     },
-    a: ({ href, children: linkChildren }) => {
+    code: ({ node: _node, style: codeStyle, children: codeChildren, ...codeProps }) => (
+      <code {...codeProps} style={mergeWrapStyle(codeStyle as React.CSSProperties | undefined)}>
+        {codeChildren}
+      </code>
+    ),
+    a: ({ href, style: linkStyle, children: linkChildren }) => {
       const issueRef = linkIssueReferences ? parseIssueReferenceFromHref(href) : null;
       if (issueRef) {
         return (
@@ -181,14 +223,14 @@ export function MarkdownBody({
               parsed.kind === "project" && "paperclip-project-mention-chip",
             )}
             data-mention-kind={parsed.kind}
-            style={mentionChipInlineStyle(parsed)}
+            style={{ ...mergeWrapStyle(linkStyle as React.CSSProperties | undefined), ...mentionChipInlineStyle(parsed) }}
           >
             {linkChildren}
           </a>
         );
       }
       return (
-        <a href={href} rel="noreferrer">
+        <a href={href} rel="noreferrer" style={mergeWrapStyle(linkStyle as React.CSSProperties | undefined)}>
           {linkChildren}
         </a>
       );
@@ -213,11 +255,11 @@ export function MarkdownBody({
   return (
     <div
       className={cn(
-        "paperclip-markdown prose prose-sm max-w-none break-words overflow-hidden",
+        "paperclip-markdown prose prose-sm min-w-0 max-w-full break-words overflow-hidden",
         theme === "dark" && "prose-invert",
         className,
       )}
-      style={style}
+      style={mergeWrapStyle(style)}
     >
       <Markdown
         remarkPlugins={remarkPlugins}