From 82f51f860155b0f933c7e3902fd6203463d77fc1 Mon Sep 17 00:00:00 2001
From: Codex <codex@noreply.local>
Date: Sat, 16 May 2026 18:32:29 +0000
Subject: [PATCH] fix code queue trace overflow

---
 src/components/frontend/public/style.css | 98 ++++++++++++++++++++++--
 1 file changed, 92 insertions(+), 6 deletions(-)

diff --git a/src/components/frontend/public/style.css b/src/components/frontend/public/style.css
index 443d31b0..a1636554 100644
--- a/src/components/frontend/public/style.css
+++ b/src/components/frontend/public/style.css
@@ -1954,9 +1954,12 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
   display: grid;
   gap: 10px;
   min-width: 0;
+  max-width: 100%;
   width: 100%;
 }
 .codex-session-stage .codex-output-panel {
+  min-width: 0;
+  max-width: 100%;
   width: 100%;
 }
 .codex-session-stage .codex-transcript {
@@ -1967,6 +1970,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
   display: grid;
   grid-template-columns: minmax(280px, 0.34fr) minmax(0, 1fr);
   min-width: 0;
+  max-width: 100%;
   align-items: stretch;
 }
 .codex-session-shell.queue-collapsed {
@@ -2093,8 +2097,30 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
   line-height: 1.35;
 }
 .codex-output-panel .panel-summary {
+  min-width: 0;
+  max-width: 100%;
   margin-top: 6px;
 }
+.codex-output-panel .panel-head {
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+.codex-output-panel .panel-head > div:first-child {
+  flex: 1 1 360px;
+  min-width: 0;
+  max-width: 100%;
+}
+.codex-output-panel .panel-eyebrow {
+  overflow-wrap: anywhere;
+}
+.codex-output-panel .loading-title-text {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.codex-output-panel .panel-actions {
+  flex: 1 1 420px;
+  max-width: 100%;
+}
 .codex-trace-status {
   display: flex;
   flex-wrap: wrap;
@@ -2106,6 +2132,8 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
   display: inline-flex;
   align-items: center;
   gap: 5px;
+  min-width: 0;
+  max-width: 100%;
   min-height: 22px;
   padding: 2px 7px;
   border: 1px solid rgba(78, 183, 168, 0.28);
@@ -2115,9 +2143,11 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
     rgba(0,0,0,0.16);
   font-size: 11px;
   letter-spacing: 0.05em;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  white-space: normal;
 }
 .codex-trace-status-chip b {
+  flex: 0 0 auto;
   color: var(--muted);
   font-weight: 650;
 }
@@ -2145,6 +2175,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 }
 .codex-session-main {
   min-width: 0;
+  max-width: 100%;
 }
 .codex-left-rail,
 .codex-main-stage,
@@ -2869,12 +2900,16 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 .codex-output-stack {
   display: grid;
   min-width: 0;
+  max-width: 100%;
 }
 .codex-transcript {
   position: relative;
+  min-width: 0;
+  max-width: 100%;
   min-height: 520px;
   max-height: calc(100vh - 300px);
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   padding: 12px;
   background:
     linear-gradient(rgba(78, 183, 168, 0.03) 1px, transparent 1px),
@@ -2893,6 +2928,8 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 0;
+  min-width: 0;
+  max-width: 100%;
   padding: 9px 0;
   border-bottom: 1px solid rgba(255,255,255,0.045);
 }
@@ -2903,12 +2940,15 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
   display: grid;
   gap: 6px;
   min-width: 0;
+  max-width: 100%;
 }
 .codex-transcript-title {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 7px;
   min-width: 0;
+  max-width: 100%;
   color: var(--text);
 }
 .codex-transcript-title strong {
@@ -2924,6 +2964,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
   white-space: nowrap;
 }
 .codex-transcript-title code {
+  min-width: 0;
   max-width: 90px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2932,6 +2973,8 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 }
 .codex-transcript-command,
 .codex-transcript-body {
+  min-width: 0;
+  max-width: 100%;
   margin: 0;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
@@ -2983,6 +3026,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 .codex-transcript-item.explored .codex-transcript-body,
 .codex-transcript-item.edited .codex-transcript-command,
 .codex-transcript-item.edited .codex-transcript-body {
+  max-width: 100%;
   white-space: pre;
   overflow-x: auto;
   overflow-y: hidden;
@@ -3022,6 +3066,8 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
   display: grid;
   align-content: start;
   gap: 10px;
+  min-width: 0;
+  max-width: 100%;
 }
 .codex-attempt-cycle {
   display: grid;
@@ -3056,6 +3102,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 }
 .codex-progressive-card {
   min-width: 0;
+  max-width: 100%;
   border: 1px solid rgba(78, 183, 168, 0.22);
   background:
     linear-gradient(135deg, rgba(78, 183, 168, 0.08), rgba(215, 161, 58, 0.035) 46%, transparent),
@@ -3098,8 +3145,10 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 .codex-progressive-card-head {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
   min-width: 0;
+  max-width: 100%;
   padding: 8px 10px;
   border-bottom: 1px solid rgba(255,255,255,0.055);
 }
@@ -3110,6 +3159,8 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
   white-space: nowrap;
 }
 .codex-progressive-card-head code {
+  min-width: 0;
+  max-width: 100%;
   margin-left: auto;
   color: var(--accent-2);
   white-space: nowrap;
@@ -3190,10 +3241,13 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 .codex-trace-step-list {
   display: grid;
   gap: 7px;
+  min-width: 0;
+  max-width: 100%;
   padding: 8px;
 }
 .codex-trace-step {
   min-width: 0;
+  max-width: 100%;
   border: 1px solid rgba(255,255,255,0.08);
   background: rgba(255,255,255,0.025);
 }
@@ -3206,8 +3260,10 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 .codex-trace-step > summary {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 7px;
   min-width: 0;
+  max-width: 100%;
   padding: 7px 9px;
   cursor: pointer;
 }
@@ -3227,11 +3283,15 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
   white-space: nowrap;
 }
 .codex-trace-step > summary code {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--accent-2);
   white-space: nowrap;
 }
 .codex-trace-step-inline-summary {
-  min-width: 80px;
+  min-width: 0;
   flex: 1 1 180px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3250,6 +3310,8 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 .codex-trace-step-summary {
   display: grid;
   gap: 2px;
+  min-width: 0;
+  max-width: 100%;
   padding: 0 9px 8px;
 }
 .codex-trace-step-summary pre {
@@ -3263,6 +3325,8 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 }
 .codex-transcript.codex-step-detail-transcript {
   min-height: auto;
+  min-width: 0;
+  max-width: calc(100% - 16px);
   max-height: 520px;
   margin: 0 8px 8px;
   padding: 8px;
@@ -3434,6 +3498,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 }
 .codex-edit-observation {
   min-width: 0;
+  max-width: 100%;
   margin-top: 2px;
   overflow: hidden;
   border: 1px solid rgba(182, 218, 137, 0.28);
@@ -3445,8 +3510,10 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 .codex-edit-observation-head {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
   min-width: 0;
+  max-width: 100%;
   padding: 7px 9px;
   border-bottom: 1px solid rgba(182, 218, 137, 0.18);
   color: var(--text);
@@ -3475,7 +3542,11 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
   letter-spacing: 0.04em;
 }
 .codex-edit-observation-head code {
+  min-width: 0;
+  max-width: 100%;
   margin-left: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: #d7f3b8;
   white-space: nowrap;
 }
@@ -3526,9 +3597,10 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 }
 .codex-edit-diff-line {
   display: grid;
-  grid-template-columns: 34px minmax(max-content, 1fr);
+  grid-template-columns: 34px minmax(0, 1fr);
   align-items: start;
-  min-width: max-content;
+  min-width: 0;
+  width: 100%;
   padding: 1px 10px;
   white-space: pre;
   color: #d7e6e1;
@@ -3545,7 +3617,9 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
   background: transparent;
   border: 0;
   padding: 0;
-  white-space: pre;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
 }
 .codex-edit-diff-sign {
   color: rgba(215, 232, 231, 0.54);
@@ -5985,6 +6059,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 }
 .codex-tool-group {
   min-width: 0;
+  max-width: 100%;
   border: 1px solid rgba(215, 161, 58, 0.24);
   background:
     linear-gradient(135deg, rgba(215, 161, 58, 0.12), rgba(78, 183, 168, 0.035) 46%, rgba(255,255,255,0.018)),
@@ -6022,8 +6097,10 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 .codex-tool-group-head {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
   min-width: 0;
+  max-width: 100%;
 }
 .codex-tool-group > summary strong,
 .codex-tool-group-head strong {
@@ -6041,6 +6118,10 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 }
 .codex-tool-group > summary code,
 .codex-tool-group-head code {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--accent-2);
   white-space: nowrap;
 }
@@ -6050,6 +6131,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 3px 12px;
   min-width: 0;
+  max-width: 100%;
   color: #a7c7c3;
   font-size: 11px;
   line-height: 1.35;
@@ -6063,11 +6145,15 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
 .codex-tool-group-items {
   display: grid;
   gap: 0;
+  min-width: 0;
+  max-width: 100%;
   padding: 0 0 8px;
 }
 .codex-transcript-item.nested {
   grid-template-columns: minmax(0, 1fr);
   gap: 0;
+  min-width: 0;
+  max-width: 100%;
   padding: 7px 0;
   border-bottom: 1px solid rgba(255,255,255,0.04);
 }