Improve mobile Admin Logs UI density and keep log metadata visible

[avresial]

Problem

The Admin / Logs page is hard to use on mobile when a log entry contains a long stack trace.

Current behavior observed on mobile:

• Long stack trace content expands horizontally/vertically and pushes important metadata out of the visible card area.
• The log level badge and timestamp are not reliably visible without scrolling.
• The user has to scroll inside/around the log content to understand the entry severity and time.
• The filter selector takes too much horizontal space because it uses full text labels: ALL, WARNING, ERROR.
• The page becomes sparse and inefficient on narrow screens.

This is especially visible for exception logs where stack traces contain long namespaces, file paths, and method names.

Goal

Make the Admin Logs page usable and dense on mobile while preserving full stack trace access.

The user should always be able to see:

• log level
• timestamp
• short message / summary
• enough context to decide whether the entry should be expanded or inspected

Long stack trace content must not push metadata outside the visible bounds of the log card.

Stack traces should not be visible immediately. The default log entry view should show only the log metadata and message/summary. Full stack trace/details should be available through an expand/collapse component.

Proposed UI changes

1. Keep log metadata visible at all times

Each log entry should have a compact fixed header area containing:

• log level indicator
• timestamp
• short message / first line

This header should stay visible regardless of stack trace length.

Suggested collapsed layout:

[Error icon/badge]  2026-06-22 20:46:22
Unhandled exception while processing GET /api/...
[Show details]

On mobile, the severity and date should be inline in the same row to reduce height.

2. Hide stack trace behind an expand component

The stack trace/details area must be collapsed by default.

Default card state should show only:

• severity
• timestamp
• log message / short summary
• optional source/context if already available and short
• expand affordance, e.g. Show details, chevron, or expansion panel header

Expanded state should show:

• full exception details
• full stack trace
• any additional structured log properties already exposed by the API/UI

Recommended behavior:

• collapsed card is compact and readable
• stack trace is not rendered as visible content until user expands the entry
• expanding one entry should not break the page layout
• long lines wrap or scroll horizontally inside the stack trace block, not the whole page/card

3. Make expanded stack trace content bounded

When expanded, the stack trace/details area should not expand the entire card uncontrollably.

Use a bounded details section, for example:

• max-height with internal scroll
• monospace block
• copy button if feasible
• clear collapse affordance

The details block should be visually secondary to the metadata/message header.

4. Prevent horizontal overflow

Long exception lines must not push content outside the card.

Apply appropriate CSS to the expanded stack trace/details block:

white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
overflow-x: auto;

Use whichever combination fits the current component style best. The key requirement is that the card itself must remain within the viewport.

5. Inline log level and timestamp

Current card layout wastes vertical space and separates metadata too much.

Change the card header to a dense inline layout:

[Error] 2026-06-22 20:46:22
Message preview...

For warnings/errors, use a compact icon + accessible label rather than a large pill when screen width is limited.

6. Change mobile log level selector to icon-only

The current segmented selector with text labels consumes too much width.

On mobile, replace:

ALL | WARNING | ERROR

with icon-only buttons, for example:

[all icon] [warning icon] [error icon]

Requirements:

• selected state must remain clear
• each button must have accessible text/aria-label/title
• desktop may keep text labels if there is enough space
• mobile should prioritize compact layout

Example labels:

• All logs
• Warnings
• Errors

7. Improve page header density on mobile

The page header currently combines a large icon, large title, and wide filter group. On mobile this causes cramped layout.

Suggested mobile layout:

[warning/log icon] Application logs        [filters as icons]

or:

Application logs
[icon filters]

Pick whichever integrates better with the existing design system.

Acceptance criteria

• On a mobile viewport, log cards never overflow horizontally outside the screen.
• Log level and timestamp are visible without scrolling through the stack trace.
• Stack traces are collapsed by default and are not visible immediately.
• Collapsed log entries show enough information: severity, timestamp, and message/summary.
• Stack trace/details are visible only after expanding the log entry.
• Expanded stack trace/details remain readable and bounded.
• Long stack traces do not push the log metadata out of view.
• Log entries are denser on mobile than the current implementation.
• The log level filter uses icon-only controls on mobile.
• Icon-only controls have accessible labels.
• Desktop layout is not degraded.
• The solution works for very long exception messages, namespaces, and file paths.

Implementation notes

Likely areas to inspect:

• Admin Logs page/component
• log card component
• log level filter component
• responsive CSS/media queries

Recommended structure for each log card:

Card
  Header
    Severity indicator
    Timestamp
  Message preview
  Expand/collapse trigger
  Details / stack trace block, collapsed by default

The details block should be the only area allowed to scroll or wrap aggressively. The card container and page layout should not overflow.

The stack trace should not be visible in the initial card render. Log message is enough for the default view.

Suggested size

size/S or size/M depending on how reusable the current log card/filter components are.

This is mostly UI/CSS/responsive behavior, but it may become size/M if the log entry component needs to be restructured into collapsed/expanded sections.

[avresial]

Implementation plan

Restructuring the Admin → Logs page (AdminLogsPage.razor) so log entries stay readable and dense on mobile, with stack traces hidden behind an expand affordance. This is the only page that renders full stack traces; the dashboard AdminLogsCard already truncates and needs no change.

Changes

1. Replace the MudTable with a card list (AdminLogsPage.razor)

• Each entry becomes a compact MudPaper/card with a fixed header that is always visible:
  • inline log-level chip + local timestamp on one row
  • message preview on the next line (wraps, never overflows)
  • category as secondary caption
• This avoids the table's horizontal-scroll / metadata-displacement behaviour on narrow screens.

2. Hide stack traces behind expand/collapse

• When Exception is present, render a Show details / Hide details toggle and a MudCollapse that is collapsed by default.
• Expanded content is a bounded monospace block: max-height with internal scroll, plus overflow guards (white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; overflow:auto) so long namespaces/paths never push the card past the viewport.
• Per-entry expand state tracked in the code-behind via a HashSet<int> keyed on LogEntryDto.Id (reset on page/filter change).

3. Icon-only level filter on mobile

• Keep the MudToggleGroup but give each item an icon (All = list, Warning = warning, Error = error) plus a text label that is hidden below sm (d-none d-sm-inline). Each item carries an aria-label/title (All logs, Warnings, Errors) for accessibility. Desktop keeps the text labels.

4. Denser page header on mobile

• Let the header row wrap and shrink the title typography on small screens so the icon, title and (now icon-only) filter fit without cramping.

Edge cases

• Very long single-line exceptions / deep namespaces → handled by the overflow guards on the bounded details block.
• Entries with no exception → no expand toggle rendered.
• Filter change / paging → expand state cleared so a reused Id can't appear pre-expanded.
• Live SignalR refresh on page 0 → unaffected; expand state simply re-derives from current items.

Tests

• This is a presentation-only change (markup/CSS + a small expand-state helper); no service/controller logic changes. I'll add a focused bUnit-style/unit assertion only if the existing test project already covers this component — otherwise validation is the strict build (dotnet build, warnings-as-errors), dotnet format, the existing unit-test suite staying green, and rendered mobile + desktop screenshots on the guest/demo account per the repo UI-testing rule.

Changelog

• Add a Changed entry under [Unreleased] describing the denser, collapsible mobile Admin Logs view (#511).

---

Generated by Claude Code