From add83334e2f59341ebf301ea3b6ba52551ac10b8 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Wed, 8 Jul 2026 15:44:56 -0400
Subject: [PATCH 1/2] fix(TableMessage): Handle inline code

Assisted-by: Cursor
---
 packages/module/src/Message/Message.test.tsx  | 25 +++++++++++++++++++
 .../Message/TableMessage/TableCellContent.tsx | 13 ++++++++++
 .../src/Message/TableMessage/TdMessage.tsx    |  7 +++++-
 .../src/Message/TableMessage/ThMessage.tsx    |  7 +++++-
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 packages/module/src/Message/TableMessage/TableCellContent.tsx

diff --git a/packages/module/src/Message/Message.test.tsx b/packages/module/src/Message/Message.test.tsx
index b1e22895c..8ca2f7144 100644
--- a/packages/module/src/Message/Message.test.tsx
+++ b/packages/module/src/Message/Message.test.tsx
@@ -118,6 +118,13 @@ const TABLE = `
 
  `;
 
+const TABLE_WITH_INLINE_CODE = `
+| Status | Finding |
+|---|---|
+| \`1/1 Running\`, 0 restarts | Healthy — no crashes |
+| \`1/1 Ready\` | Desired replicas met |
+`;
+
 const ONE_COLUMN_TABLE = `
 
  | Column 1 |
@@ -1041,6 +1048,24 @@ describe('Message', () => {
     render(<Message avatar="./img" role="user" name="User" content={TABLE} tableProps={{ 'aria-label': 'Test' }} />);
     expect(screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
   });
+  it('should wrap table cell content so inline code does not break grid layout', () => {
+    render(
+      <Message
+        avatar="./img"
+        role="user"
+        name="User"
+        content={TABLE_WITH_INLINE_CODE}
+        tableProps={{ 'aria-label': 'Inline code table' }}
+      />
+    );
+    const statusCell = screen.getByRole('cell', { name: /1\/1 Running/i });
+    expect(statusCell.querySelector(':scope > .pf-chatbot__message-table-cell-content')).toBeTruthy();
+    expect(statusCell.querySelector(':scope > code')).toBeFalsy();
+    expect(statusCell.querySelector('.pf-chatbot__message-inline-code')).toBeTruthy();
+    expect(
+      screen.getByRole('columnheader', { name: /Status/i }).querySelector('.pf-chatbot__message-table-cell-content')
+    ).toBeTruthy();
+  });
   it('should render footnote correctly', () => {
     render(<Message avatar="./img" role="user" name="User" content={FOOTNOTE} />);
     expect(screen.getByText(/This is some text with a footnote/i)).toBeTruthy();
diff --git a/packages/module/src/Message/TableMessage/TableCellContent.tsx b/packages/module/src/Message/TableMessage/TableCellContent.tsx
new file mode 100644
index 000000000..1d04d1f0f
--- /dev/null
+++ b/packages/module/src/Message/TableMessage/TableCellContent.tsx
@@ -0,0 +1,13 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Table cell wrapper
+// ============================================================================
+
+/**
+ * Wraps table cell content in a single element so phrasing content (e.g. inline
+ * code mixed with text) is not a direct child of td/th.
+ */
+const TableCellContent = ({ children }: { children?: React.ReactNode }) => (
+  <span className="pf-chatbot__message-table-cell-content">{children}</span>
+);
+
+export default TableCellContent;
diff --git a/packages/module/src/Message/TableMessage/TdMessage.tsx b/packages/module/src/Message/TableMessage/TdMessage.tsx
index a998cfa00..b11feaab0 100644
--- a/packages/module/src/Message/TableMessage/TdMessage.tsx
+++ b/packages/module/src/Message/TableMessage/TdMessage.tsx
@@ -4,7 +4,12 @@
 
 import { ExtraProps } from 'react-markdown';
 import { Td, TdProps } from '@patternfly/react-table';
+import TableCellContent from './TableCellContent';
 
-const TdMessage = ({ children, ...props }: Omit<TdProps, 'ref'> & ExtraProps) => <Td {...props}>{children}</Td>;
+const TdMessage = ({ children, ...props }: Omit<TdProps, 'ref'> & ExtraProps) => (
+  <Td {...props}>
+    <TableCellContent>{children}</TableCellContent>
+  </Td>
+);
 
 export default TdMessage;
diff --git a/packages/module/src/Message/TableMessage/ThMessage.tsx b/packages/module/src/Message/TableMessage/ThMessage.tsx
index 264a0ce23..69f7b9e9a 100644
--- a/packages/module/src/Message/TableMessage/ThMessage.tsx
+++ b/packages/module/src/Message/TableMessage/ThMessage.tsx
@@ -4,7 +4,12 @@
 
 import { ExtraProps } from 'react-markdown';
 import { Th, ThProps } from '@patternfly/react-table';
+import TableCellContent from './TableCellContent';
 
-const ThMessage = ({ children, ...props }: Omit<ThProps, 'ref'> & ExtraProps) => <Th {...props}>{children}</Th>;
+const ThMessage = ({ children, ...props }: Omit<ThProps, 'ref'> & ExtraProps) => (
+  <Th {...props}>
+    <TableCellContent>{children}</TableCellContent>
+  </Th>
+);
 
 export default ThMessage;

From 23cb6bdcfe91d8e1d10006d8890a353b5c4ce777 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Fri, 10 Jul 2026 15:34:34 -0400
Subject: [PATCH 2/2] Address feedback

---
 packages/module/src/Message/TableMessage/TableCellContent.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/module/src/Message/TableMessage/TableCellContent.tsx b/packages/module/src/Message/TableMessage/TableCellContent.tsx
index 1d04d1f0f..2dfff226e 100644
--- a/packages/module/src/Message/TableMessage/TableCellContent.tsx
+++ b/packages/module/src/Message/TableMessage/TableCellContent.tsx
@@ -1,7 +1,3 @@
-// ============================================================================
-// Chatbot Main - Message - Content - Table cell wrapper
-// ============================================================================
-
 /**
  * Wraps table cell content in a single element so phrasing content (e.g. inline
  * code mixed with text) is not a direct child of td/th.