fix(ui): keep codex toml tokens inline (#1219)

This commit is contained in:
Kai (Tam Nhu) Tran
2026-05-12 07:51:59 -04:00
committed by GitHub
parent e5a10c9ed9
commit 5138741b5c
2 changed files with 12 additions and 0 deletions
+5
View File
@@ -172,6 +172,11 @@ export function CodeEditor({
}
const tokenProps = getTokenProps({ token });
// Prism TOML emits a `table` class, which collides with Tailwind's layout utility.
tokenProps.style = {
...tokenProps.style,
display: 'inline',
};
if (isSensitive && isMasked) {
tokenProps.className = cn(
@@ -71,6 +71,8 @@ describe('CodeEditor', () => {
it('renders raw TOML with wrapping syntax color while copied text stays raw', () => {
const rawToml =
'model = "gpt-5.4"\n' +
'[agents.brainstormer]\n' +
'config_file = "agents/brainstormer.toml"\n' +
'[mcp_servers.playwright]\n' +
'command = "node"\n' +
'args = ["--experimental-loader", "./very/long/path/that/should/not/soft/wrap/into/fake/toml/lines.js"]\n';
@@ -89,6 +91,9 @@ describe('CodeEditor', () => {
const textarea = container.querySelector('[data-slot="code-editor-plain-textarea"]');
const highlightLayer = container.querySelector('[data-slot="code-editor-highlight-layer"]');
const highlightedToken = highlightLayer?.querySelector('span');
const tableToken = Array.from(highlightLayer?.querySelectorAll('span') ?? []).find(
(token) => token.textContent === 'agents.brainstormer'
);
expect(textarea).toBeInstanceOf(HTMLTextAreaElement);
expect(textarea).toHaveValue(rawToml);
@@ -103,6 +108,8 @@ describe('CodeEditor', () => {
wordBreak: 'break-word',
});
expect(highlightedToken).toBeInTheDocument();
expect(tableToken).toHaveClass('table');
expect(tableToken).toHaveStyle({ display: 'inline' });
expect(container.querySelector('pre')).not.toBeInTheDocument();
if (textarea instanceof HTMLTextAreaElement && highlightLayer instanceof HTMLElement) {
textarea.scrollLeft = 96;