fix(ui): land #30978 debug event log full-width payloads (@stozo04)

Landed from contributor PR #30978 by @stozo04.

Co-authored-by: stozo04 <stozo04@users.noreply.github.com>

CHANGELOG.md

@@ -23,6 +23,7 @@ Docs: https://docs.openclaw.ai
 - Windows/Plugin install: avoid `spawn EINVAL` on Windows npm/npx invocations by resolving to `node` + npm CLI scripts instead of spawning `.cmd` directly. Landed from contributor PR #31147 by @codertony. Thanks @codertony.
 - LINE/Voice transcription: classify M4A voice media as `audio/mp4` (not `video/mp4`) by checking the MPEG-4 `ftyp` major brand (`M4A ` / `M4B `), restoring voice transcription for LINE voice messages. Landed from contributor PR #31151 by @scoootscooob. Thanks @scoootscooob.
 - Cron/Delivery mode none: send explicit `delivery: { mode: "none" }` from cron editor for both add and update flows so previous announce delivery is actually cleared. Landed from contributor PR #31145 by @byungsker. Thanks @byungsker.
+- Control UI/Debug log layout: render Debug Event Log payloads at full width to prevent payload JSON from being squeezed into a narrow side column. Landed from contributor PR #30978 by @stozo04. Thanks @stozo04.
 - Agents/Thinking fallback: when providers reject unsupported thinking levels without enumerating alternatives, retry with `think=off` to avoid hard failure during model/provider fallback chains. Landed from contributor PR #31002 by @yfge. Thanks @yfge.
 - Agents/Failover reason classification: avoid false rate-limit classification from incidental `tpm` substrings by matching TPM as a standalone token/phrase and keeping auth-context errors on the auth path. Landed from contributor PR #31007 by @HOYALIM. Thanks @HOYALIM.
 - Slack/Announce target account routing: enable session-backed announce-target lookup for Slack so multi-account announces resolve the correct `accountId` instead of defaulting to bot-token context. Landed from contributor PR #31028 by @taw0002. Thanks @taw0002.

ui/src/styles/components.css

@@ -1191,6 +1191,21 @@
   width: 100%;
 }
 
+/* Debug event log payloads should use full width like other debug sections. */
+.debug-event-log__item {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.debug-event-log__meta {
+  min-width: 0;
+  text-align: left;
+}
+
+.debug-event-log__payload {
+  margin: 0;
+  max-width: 100%;
+}
+
 /* Cron jobs: allow long payload/state text and keep action buttons inside the card. */
 .cron-job-payload,
 .cron-job-agent,

ui/src/ui/views/debug.ts

@@ -127,16 +127,18 @@ export function renderDebug(props: DebugProps) {
               <div class="muted" style="margin-top: 12px">No events yet.</div>
             `
           : html`
-            <div class="list" style="margin-top: 12px;">
+            <div class="list debug-event-log" style="margin-top: 12px;">
               ${props.eventLog.map(
                 (evt) => html`
-                  <div class="list-item">
+                  <div class="list-item debug-event-log__item">
                     <div class="list-main">
                       <div class="list-title">${evt.event}</div>
                       <div class="list-sub">${new Date(evt.ts).toLocaleTimeString()}</div>
                     </div>
-                    <div class="list-meta">
-                      <pre class="code-block">${formatEventPayload(evt.payload)}</pre>
+                    <div class="list-meta debug-event-log__meta">
+                      <pre class="code-block debug-event-log__payload">${formatEventPayload(
+                        evt.payload,
+                      )}</pre>
                     </div>
                   </div>
                 `,