Polish Svelte event and settings UX#2240
Merged
Merged
Conversation
Improve event detail tabs, session navigation, settings layouts, table actions, scrollbar stability, and generated sample extended data.
|
niemyjski
approved these changes
May 18, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refines the Svelte app UX around event details (tabs + session navigation), settings pages (layouts/headings/toolbars), and some global scroll/popover behavior. It also improves generated sample event data used for extended-data displays.
Changes:
- Reworks event detail tabs (scrollable tab list + session deep-link/filter flow) and updates the event sheet scrolling behavior.
- Standardizes multiple system/project/organization settings pages by simplifying headings and moving “add/invite” actions into data table toolbars.
- Adjusts popover/select scroll-lock defaults and adds a global scrollbar stabilization rule; enriches server-side random event extended data.
Reviewed changes
Copilot reviewed 32 out of 32 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Exceptionless.Web/ClientApp/src/routes/(app)/system/overview/+page.svelte | Simplifies system overview header/presentation. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/system/migrations/+page.svelte | Simplifies migrations page header/presentation. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/system/elasticsearch/+layout.svelte | Simplifies Elasticsearch section header and layout. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/system/actions/[[category]]/+page.svelte | Simplifies actions page header/presentation. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/system/+layout.svelte | Replaces sidebar layout with horizontal, scrollable tab-style navigation. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/usage/+page.svelte | Simplifies usage page header copy and punctuation. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/settings/+page.svelte | Removes redundant page header/separator and tweaks copy. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/manage/+page.svelte | Simplifies header and improves destructive action labeling. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/integrations/+page.svelte | Moves webhook actions/view options into the table toolbar. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/configure/+page.svelte | Simplifies header and removes extra separator. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/configuration-values/+page.svelte | Moves add/view-options controls into the table toolbar. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/api-keys/+page.svelte | Moves add/view-options controls into the table toolbar. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/project/[projectId]/+layout.svelte | Replaces sidebar layout with horizontal, scrollable tab-style navigation. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/list/+page.svelte | Moves add/view-options controls into the organizations table toolbar. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/users/+page.svelte | Moves invite/view-options controls into the users table toolbar. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/usage/+page.svelte | Simplifies usage page header copy and punctuation. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/projects/+page.svelte | Moves add control into the projects table toolbar; simplifies header. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/manage/+page.svelte | Simplifies header and improves destructive action labeling. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/features/+page.svelte | Simplifies features page header/presentation. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/billing/+page.svelte | Removes redundant billing heading/separator. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/organization/[organizationId]/+layout.svelte | Replaces sidebar layout with horizontal, scrollable tab-style navigation. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte | Adds time= handling to allow “no date filter” flows for deep links. |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/sidebar-nav.svelte | Adds orientation option plumbing to navigation container. |
| src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/select/select-content.svelte | Changes default scroll-lock behavior for select popovers. |
| src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/dropdown-menu/dropdown-menu-content.svelte | Adds configurable scroll-lock behavior for dropdown menus. |
| src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/navigation/nav-container.svelte | Adds orientation option and horizontal scrolling behavior. |
| src/Exceptionless.Web/ClientApp/src/lib/features/projects/api.svelte.ts | Ensures promoted-tab mutation uses JSON content-type/body. |
| src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/session-events.svelte | Adds session event deep-link/filter button and row navigation behavior. |
| src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-overview.svelte | Adds scrollable tab UX and session tab wiring. |
| src/Exceptionless.Web/ClientApp/src/lib/features/events/components/event-detail-sheet.svelte | Tweaks sheet scrolling and closes sheet on session-filter navigation. |
| src/Exceptionless.Web/ClientApp/src/app.css | Updates theme muted colors and stabilizes scrollbar behavior. |
| src/Exceptionless.Core/Utility/RandomEventGenerator.cs | Produces more realistic extended-data payloads for sample events/errors. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+114
to
119
| let filters = $state(applyTimeFilter(getFiltersFromCache(filterCacheKey(queryParams.filter), queryParams.filter), getQueryTime())); | ||
| watch( | ||
| [() => queryParams.filter, () => queryParams.time, () => filterCacheVersionNumber()], | ||
| ([filter, time]) => { | ||
| filters = applyTimeFilter(getFiltersFromCache(filterCacheKey(filter), filter), time); | ||
| [() => queryParams.filter, () => queryParams.time, () => page.url.search, () => filterCacheVersionNumber()], | ||
| ([filter]) => { | ||
| filters = applyTimeFilter(getFiltersFromCache(filterCacheKey(filter), filter), getQueryTime()); | ||
| }, |
Comment on lines
+176
to
186
| <Table.Row | ||
| aria-label={`Open event ${sessionEvent.id}`} | ||
| class="hover:bg-muted/50 focus-visible:ring-ring/50 focus-visible:outline-ring cursor-pointer focus-visible:ring-[3px] focus-visible:outline-1" | ||
| onclick={() => openSessionEvent(sessionEvent.id)} | ||
| onkeydown={(keyboardEvent) => handleSessionEventKeydown(keyboardEvent, sessionEvent.id)} | ||
| role="link" | ||
| tabindex={0} | ||
| title="Open event details" | ||
| > | ||
| <Table.Cell> | ||
| <Summary summary={sessionEvent} showType={true} showStatus={false} /> |
|
|
||
| let { children, class: className, ...props }: Props = $props(); | ||
| let { children, class: className, orientation = 'responsive', ...props }: Props = $props(); | ||
| // TODO: Look into having this use the sidbar menu items and a tab control on mobile. |
niemyjski
pushed a commit
that referenced
this pull request
May 19, 2026
* Polish Svelte event and settings UX Improve event detail tabs, session navigation, settings layouts, table actions, scrollbar stability, and generated sample extended data. * Fix Svelte UI formatting
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Polishes the Svelte event details, session event navigation, and settings experiences.
Summary:
Validation:
Note: Full solution
dotnet buildwas attempted, but local running .NET host/debug adapter processes locked Web/Job output DLLs during copy. The changed Core project built successfully.