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();
expect(screen.getByRole('grid', { name: /Test/i })).toBeTruthy();
});
+ it('should wrap table cell content so inline code does not break grid layout', () => {
+ render(
+
+ );
+ 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();
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..2dfff226e
--- /dev/null
+++ b/packages/module/src/Message/TableMessage/TableCellContent.tsx
@@ -0,0 +1,9 @@
+/**
+ * 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 }) => (
+ {children}
+);
+
+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 & ExtraProps) => | {children} | ;
+const TdMessage = ({ children, ...props }: Omit & ExtraProps) => (
+
+ {children}
+ |
+);
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 & ExtraProps) => {children} | ;
+const ThMessage = ({ children, ...props }: Omit & ExtraProps) => (
+
+ {children}
+ |
+);
export default ThMessage;