fix: fix console log level alignment and mobile layout issue

[lingyun14beta]

Fixes #7987

Modifications / 改动点

Modified dashboard/src/components/shared/ConsoleDisplayer.vue:

• Changed grid-template-columns second column from 10ch to max-content, fixing the abnormal whitespace after [INFO] log level tag

• Changed overflow-x from hidden to auto on .console-term to allow horizontal scrolling for long log lines

• Added @media (max-width: 768px) responsive rule to switch to single-column layout on mobile, fixing vertical text display issue

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

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

---

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

Adjust console log layout for better alignment and mobile display.

Bug Fixes:

• Fix misaligned console log level tags by resizing the second grid column to fit content.
• Prevent structured console logs from overflowing on small screens by switching to a single-column layout and hiding empty prefix/level fields.

Enhancements:

• Allow horizontal scrolling of the console display to handle wide log content.

[sourcery-ai]

Hey - I've left some high level feedback:

• Using overflow-x: hidden on .console-term may hide long unbreakable content; consider adding more aggressive wrapping (e.g., word-break: break-all or similar) in the log body instead of fully clipping horizontal overflow.
• On the mobile @media rule, collapsing to a single 1fr column may cause log level tags and messages to visually blend; consider adding vertical spacing or explicit row structure (e.g., row gaps or block display for the level tag) to keep the hierarchy clear on small screens.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Using `overflow-x: hidden` on `.console-term` may hide long unbreakable content; consider adding more aggressive wrapping (e.g., `word-break: break-all` or similar) in the log body instead of fully clipping horizontal overflow.
- On the mobile `@media` rule, collapsing to a single `1fr` column may cause log level tags and messages to visually blend; consider adding vertical spacing or explicit row structure (e.g., row gaps or block display for the level tag) to keep the hierarchy clear on small screens.

---

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 styling of the ConsoleDisplayer component by adding horizontal overflow control, adjusting grid column widths for log levels, and implementing a responsive single-column layout for mobile screens. Feedback suggests using overflow-x: auto instead of hidden to prevent clipping long lines, reverting the log level column to a fixed width to maintain vertical alignment and scannability, and hiding empty prefix or level elements in the mobile view to optimize vertical space.

[lingyun14beta]

等我重新build测试一下（

[lingyun14beta]

@sourcery-ai review

[sourcery-ai]

Hey - I've left some high level feedback:

• The description mentions adding overflow-x: hidden, but the code uses overflow-x: auto; double-check whether you want to hide overflow entirely or allow horizontal scrolling and update either the code or description for consistency.
• The @media (max-width: 768px) rule currently targets :deep(.console-log-line--structured) globally; consider scoping this media query under a more specific parent (e.g., the console container class) to avoid unintended layout changes if similar classes appear elsewhere.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The description mentions adding `overflow-x: hidden`, but the code uses `overflow-x: auto`; double-check whether you want to hide overflow entirely or allow horizontal scrolling and update either the code or description for consistency.
- The `@media (max-width: 768px)` rule currently targets `:deep(.console-log-line--structured)` globally; consider scoping this media query under a more specific parent (e.g., the console container class) to avoid unintended layout changes if similar classes appear elsewhere.

---

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.}

[lingyun14beta]

/gemini review

[gemini-code-assist]

Code Review

This pull request updates the ConsoleDisplayer component by adding horizontal scrolling and implementing a responsive mobile layout. The review feedback identifies that changing the second column to max-content disrupts the vertical alignment of log messages and introduces unwanted indentation for lines without prefixes. Additionally, it is recommended to add a row-gap to the mobile grid layout to improve readability when elements are stacked.

[gemini-code-assist]

Changing the second column to max-content removes the vertical alignment of log messages across different lines, which can make the console logs harder to scan. Additionally, the column-gap: 8px on line 384 causes an 8px indentation for log lines that do not have a prefix (e.g., logs starting directly with [INFO]), as the gap is still applied after the empty first column.

[lingyun14beta]

已知限制：除debug外，info等会自动换行