From 5138741b5c0fdc0da87982bd59227fad56f8a046 Mon Sep 17 00:00:00 2001
From: "Kai (Tam Nhu) Tran" <61256810+kaitranntt@users.noreply.github.com>
Date: Tue, 12 May 2026 07:51:59 -0400
Subject: [PATCH] fix(ui): keep codex toml tokens inline (#1219)

---
 ui/src/components/shared/code-editor.tsx         | 5 +++++
 ui/tests/unit/components/ui/code-editor.test.tsx | 7 +++++++
 2 files changed, 12 insertions(+)

diff --git a/ui/src/components/shared/code-editor.tsx b/ui/src/components/shared/code-editor.tsx
index 715a62d4..2f028edc 100644
--- a/ui/src/components/shared/code-editor.tsx
+++ b/ui/src/components/shared/code-editor.tsx
@@ -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(
diff --git a/ui/tests/unit/components/ui/code-editor.test.tsx b/ui/tests/unit/components/ui/code-editor.test.tsx
index 8aef532c..010ff2f5 100644
--- a/ui/tests/unit/components/ui/code-editor.test.tsx
+++ b/ui/tests/unit/components/ui/code-editor.test.tsx
@@ -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;