Add option to console logs to wrap log lines

[JamesNK]

Description

I can't reproduce the issue with console logs. I think the problem is long lines can wrap, which means they have unequal height, which the Blazor virtualize control doesn't support.

This change adds an option to turn off wrapping. People who have the problem can try out turning this on and see whether the issue disappears.

Contributes to #7969

Checklist

• Is this feature complete?
  • Yes. Ready to ship.
  • No. Follow-up changes expected.
• Are you including unit tests for the changes and scenario tests if relevant?
  • Yes
  • No
• Did you add public API?
  • Yes
    • If yes, did you have an API Review for it?
      • Yes
      • No
    • Did you add <remarks /> and <code /> elements on your triple slash comments?
      • Yes
      • No
  • No
• Does the change make any security assumptions or guarantees?
  • Yes
    • If yes, have you done a threat model and had a security review?
      • Yes
      • No
  • No
• Does the change require an update in our Aspire docs?
  • Yes
    • Link to aspire-docs issue (consider using one of the following templates):
      • New (or update) doc-idea template
      • New breaking-change template
      • New diagnostic template
  • No

[Copilot]

Pull Request Overview

This PR introduces a user toggle to disable wrapping of long console log lines and persists that setting in local storage.

• Adds CSS rules and a wrapper class to control log line wrapping
• Introduces new resource keys and XLF entries for “Wrap log lines” and “No wrap log lines”
• Updates the ConsoleLogs page and LogViewer control to surface the new toggle and persist its state

Reviewed Changes

Copilot reviewed 19 out of 20 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
wwwroot/css/app.css	Adds .wrap-log-container styles for no-wrap
Resources/ConsoleLogs.resx & *.xlf	Adds new resource keys for wrap/no-wrap
Components/Pages/ConsoleLogs.razor.cs	Adds _noWrapLogs, toggle handler, and settings
Components/Pages/ConsoleLogs.razor	Passes NoWrapLogs parameter to LogViewer
Components/Controls/LogViewer.razor.cs	Declares new NoWrapLogs parameter
Components/Controls/LogViewer.razor	Applies wrap-log-container class when toggled

Files not reviewed (1)

• src/Aspire.Dashboard/Resources/ConsoleLogs.Designer.cs: Language not supported

Comments suppressed due to low confidence (3)

src/Aspire.Dashboard/Components/Controls/LogViewer.razor:13

• [nitpick] The class name wrap-log-container is misleading since it actually disables wrapping. Consider renaming to no-wrap-log-container for clarity.

    <div class="@($"log-container console-container {(NoWrapLogs ? "wrap-log-container" : null)}")" id="logContainer">

src/Aspire.Dashboard/Components/Controls/LogViewer.razor.cs:43

• Please add an XML doc comment summarizing the purpose of the NoWrapLogs parameter to maintain documentation consistency with other component parameters.

    public bool NoWrapLogs { get; set; }

src/Aspire.Dashboard/Components/Pages/ConsoleLogs.razor.cs:417

• The new ToggleWrapLogsAsync behavior is not covered by existing tests. Consider adding a unit or integration test to verify the wrap toggle persists and updates the UI correctly.

    private async Task ToggleWrapLogsAsync(bool noWrapLogs)

[adityamandaleeka]

I generally dislike having options like "don't do X." Can the option instead be "Wrap log lines" and just default to enabled?

[JamesNK]

The text changes depending on the current state. The default state is wrapping long lines, and then you click No wrap log lines option to switch. The text then changes to Wrap log lines.

Alernatively the UI could be a checkbox like UTC timestamp.

[danmoseley]

/backport to release/9.4

[github-actions]

Started backporting to release/9.4: https://github.com/dotnet/aspire/actions/runs/16207875133