fix: resolve WebUI DBUG mismatch and mobile log wrapping

[SiriusAhu]

Addresses #7987
Closes #8021

This PR fixes two related WebUI log rendering issues on the platform log page: one is the abnormal spacing / inconsistent rendering around DBUG log lines tracked in #8021, and the other is the mobile-side near-vertical log wrapping symptom reported in #7987.

An earlier related attempt in #7988 also identified the mobile-side symptom reported in #7987, which helped provide useful context during reproduction.

Modifications / 改动点

• Corrected the structured log level matching pattern in dashboard/src/components/shared/ConsoleDisplayer.vue from DEBG to DBUG, so DBUG log lines can enter the same structured rendering path as INFO lines.

• Added horizontal scrolling support for the console container to avoid overly aggressive compression on narrow screens.

• Added a mobile-only minimum-width safeguard for structured log lines.

• Adjusted mobile log message wrapping behavior to avoid character-by-character wrapping that could make logs appear nearly vertical.

• This is NOT a breaking change. / 这不是一个破坏性变更。

Screenshots or Test Results / 运行截图或测试结果

• Mobile: verified that log content no longer collapses into near-vertical text on a narrow screen after the fix.

• Desktop: verified that DBUG and INFO log lines render consistently on the WebUI platform log page after the fix.

• Automated checks:
  • Ruff format check: passed.
  • Ruff lint check: passed.
  • Neo-related pytest checks: passed.
  • Dashboard build: passed.

---

Checklist / 检查清单

• 😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
  / 如果 PR 中有新加入的功能，已经通过 Issue / 邮件等方式和作者讨论过。

• 👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
  / 我的更改经过了良好的测试，并已在上方提供了“验证步骤”和“运行截图”。

• 🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in requirements.txt and pyproject.toml.
  / 我确保没有引入新依赖库，或者引入了新依赖库的同时将其添加到 requirements.txt 和 pyproject.toml 文件相应位置。

• 😮 My changes do not introduce malicious code.
  / 我的更改没有引入恶意代码。

Summary by Sourcery

Fix WebUI console log rendering for DBUG lines and improve mobile log readability and layout.

Bug Fixes:

• Ensure DBUG log entries are recognized and rendered using the structured log layout in the WebUI console.
• Prevent near-vertical text wrapping of log messages on narrow mobile screens by adjusting wrapping behavior and layout.

Enhancements:

• Enable horizontal scrolling in the console view and introduce mobile-specific padding and minimum-width styling for structured log lines to preserve readability.

[sourcery-ai]

Hey - I've left some high level feedback:

• The log level regex is getting long and a bit brittle; consider either centralizing the list of supported levels (short codes and full names) or using a single canonical mapping so additions/changes don’t require updating multiple hard-coded strings.
• On mobile, setting .console-log-message to white-space: pre with overflow-wrap: normal will prevent any wrapping and may force excessive horizontal scrolling; you might consider pre-wrap or a similar option to preserve spacing while still allowing more natural word-level wrapping.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The log level regex is getting long and a bit brittle; consider either centralizing the list of supported levels (short codes and full names) or using a single canonical mapping so additions/changes don’t require updating multiple hard-coded strings.
- On mobile, setting `.console-log-message` to `white-space: pre` with `overflow-wrap: normal` will prevent any wrapping and may force excessive horizontal scrolling; you might consider `pre-wrap` or a similar option to preserve spacing while still allowing more natural word-level wrapping.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[gemini-code-assist]

Code Review

This pull request updates the log level regex to match 'DBUG' and introduces mobile-specific styling for the console displayer, including horizontal scrolling and adjustments to text wrapping. Feedback suggests extending the mobile wrapping fixes to non-structured logs to ensure consistent behavior across all log types.

[gemini-code-assist]

The mobile fix for "near-vertical" log wrapping (reported in #7987) currently only applies to structured logs. Non-structured logs (those that do not match the level regex) will still use white-space: pre-wrap from the .console-log-line class (defined at line 378), causing them to wrap aggressively on narrow screens.

To ensure all logs behave consistently on mobile, you should apply min-width: max-content and white-space: pre to the base .console-log-line class as well. For structured logs, we should maintain white-space: normal on the grid container to preserve the layout while allowing the message child to handle its own wrapping/scrolling.

  :deep(.console-log-line),
  :deep(.console-log-line--structured) {
    min-width: max-content;
  }

  :deep(.console-log-line) {
    white-space: pre;
  }

  :deep(.console-log-line--structured) {
    white-space: normal;
  }

[SiriusAhu]

Thanks, I’ll test the non-structured log case on mobile first and update the PR if needed.

[SiriusAhu]

Thanks. I checked the current reproduction scope, and all observed platform logs are still going through the structured path. Since this PR is focused on the confirmed DBUG mismatch and the mobile layout issue reported in #7987, I’d prefer not to expand it into a broader fallback-layout change unless we can reproduce a real non-structured case in this log view.

[SiriusAhu]

Hey - I've left some high level feedback:

* The log level regex is getting long and a bit brittle; consider either centralizing the list of supported levels (short codes and full names) or using a single canonical mapping so additions/changes don’t require updating multiple hard-coded strings.

* On mobile, setting `.console-log-message` to `white-space: pre` with `overflow-wrap: normal` will prevent any wrapping and may force excessive horizontal scrolling; you might consider `pre-wrap` or a similar option to preserve spacing while still allowing more natural word-level wrapping.

Prompt for AI Agents

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Thanks for the suggestions. I agree the level-regex handling could be improved from a maintainability perspective, but I’d treat that as a separate refactor. In this PR I’m keeping the scope limited to the confirmed DBUG mismatch and the related mobile log layout fix. I also tried an alternative mobile layout to reduce horizontal scrolling by moving the structured log message onto a second row on narrow screens, so the prefix/level stayed on the first row and the message could use the full width below. In practice, that layout felt visually awkward and noticeably less readable than the current version. For this PR, I prefer to keep the current behavior because it preserves the full log content and prevents the near-vertical wrapping issue, even though narrow screens may still require horizontal scrolling.