Skip to content

Polish event detail sheet: tabs, stack traces, syntax colors#2266

Merged
ejsmith merged 2 commits into
mainfrom
ui/detail-sheet-polish-2
May 28, 2026
Merged

Polish event detail sheet: tabs, stack traces, syntax colors#2266
ejsmith merged 2 commits into
mainfrom
ui/detail-sheet-polish-2

Conversation

@ejsmith
Copy link
Copy Markdown
Member

@ejsmith ejsmith commented May 28, 2026

What changed

Visual polish for the event detail sheet to improve consistency and readability.

Tabs

  • Restyle event detail tabs to match the settings nav pattern (bg-muted, rounded-lg, gap-1, p-1)
  • Add dark mode active state (bg-background, shadow-xs, border-transparent)

Stack traces

  • Update container styling: bg-muted/50, rounded-xl, subtle border
  • Fix code component to use cn() for proper Tailwind class merging
  • Collapse code template to single line to prevent whitespace rendering in <pre>
  • Fix transparent background override (bg-transparent instead of bg-inherit)

Syntax highlighting

  • Soften colors for dark mode readability: purple-400purple-300, emerald-400green-300

Copy buttons

  • Restyle to size="icon-sm" variant="outline" for consistency

Event navigation

  • Use keepPreviousData to prevent content flash when navigating between events

ejsmith added 2 commits May 28, 2026 09:46
- Fix event navigation flash by using keepPreviousData in TanStack Query
- Style stack trace pre elements with bg-muted/50, rounded-xl, border
- Fix Code component: use cn() for proper class merging, collapse template
  to avoid whitespace in pre elements, restore bg-muted default
- Change copy stack trace button to outline variant matching other icons
- Restyle event tabs to match settings nav (bg-muted, gap, rounded-lg)
- Add active tab dark mode styling (bg-background, shadow-xs)
- Update stack trace container (bg-muted/50, rounded-xl, border)
- Fix code component whitespace and use cn() for class merging
- Change syntax colors: purple-400 -> purple-300, emerald-400 -> green-300
- Restyle copy buttons to icon-sm outline variant
- Use keepPreviousData to prevent flash on event navigation
@ejsmith ejsmith force-pushed the ui/detail-sheet-polish-2 branch from c60b21f to c88232f Compare May 28, 2026 15:29
@github-actions
Copy link
Copy Markdown

Code Coverage

Package Line Rate Branch Rate Complexity Health
Exceptionless.Insulation 25% 23% 203
Exceptionless.Web 73% 62% 3920
Exceptionless.AppHost 18% 9% 82
Exceptionless.Core 69% 63% 7811
Summary 68% (13518 / 19842) 62% (7113 / 11560) 12016

@ejsmith ejsmith merged commit f3f6356 into main May 28, 2026
9 checks passed
@ejsmith ejsmith deleted the ui/detail-sheet-polish-2 branch May 28, 2026 15:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant