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;