Improves text wrapping and reactivity.

Refactors several components to improve text wrapping and whitespace handling for better readability, especially in code and stack trace displays.

Additionally, updates multiple components to use `$derived` for reactive property updates, ensuring UI elements are updated efficiently in response to data changes.

This change enhances the user experience by ensuring text is displayed correctly and UI elements react appropriately to changes in data.

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte

@@ -161,7 +161,7 @@
                 {:else if showXmlCodeEditor}
                     <CodeBlock {code} language="xml" />
                 {:else}
-                    <pre class="bg-muted rounded p-2 break-words whitespace-pre-wrap"><Code class="px-0"><div class="bg-inherit">{clipboardData}</div></Code
+                    <pre class="bg-muted rounded p-2 wrap-break-word whitespace-pre-wrap"><Code class="px-0"><div class="bg-inherit">{clipboardData}</div></Code
                         ></pre>
                 {/if}
             {:else}

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/simple-stack-trace/simple-stack-trace.svelte

@@ -13,10 +13,10 @@
 
     let { error }: Props = $props();
 
-    const errors = getErrors(error);
+    const errors = $derived(getErrors(error));
 </script>
 
-<pre class="bg-muted rounded p-2 break-words whitespace-pre-wrap"><Code class="px-0"
+<pre class="bg-muted rounded p-2 wrap-break-word whitespace-pre-wrap"><Code class="px-0"
         >{#each errors.reverse() as error, index (index)}<SimpleStackTraceHeader {error} /><SimpleStackTraceFrames {error} />{#if index < errors.length - 1}<br
                 />{/if}{/each}</Code
     ></pre>

src/Exceptionless.Web/ClientApp/src/lib/features/events/components/stack-trace/stack-trace.svelte

@@ -13,10 +13,10 @@
 
     let { error }: Props = $props();
 
-    const errors = getErrors(error);
+    const errors = $derived(getErrors(error));
 </script>
 
-<pre class="bg-muted rounded p-2 break-words whitespace-pre-wrap"><Code class="px-0"
+<pre class="bg-muted rounded p-2 wrap-break-word whitespace-pre-wrap"><Code class="px-0"
         >{#each errors.reverse() as error, index (index)}<StackTraceHeader {error} /><StackTraceFrames {error} />{#if index < errors.length - 1}<br
                 />{/if}{/each}</Code
     ></pre>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/formatters/bytes.svelte

@@ -5,7 +5,7 @@
 
     let { value }: Props = $props();
 
-    const parsedValue = typeof value === 'number' ? value : parseFloat(value ?? '');
+    const parsedValue = $derived(typeof value === 'number' ? value : parseFloat(value ?? ''));
     const byteValueNumberFormatter = new Intl.NumberFormat(navigator.language, {
         notation: 'compact',
         style: 'unit',

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/object-dump.svelte

@@ -13,11 +13,11 @@
 
     let { value }: Props = $props();
 
-    let type = typeof value;
-    let isBoolean = type === 'boolean' || value instanceof Boolean;
-    let isObject = (type === 'object' || value instanceof Object) && value !== null;
-    let isNull = value === null;
-    let isEmptyValue = isEmpty(value);
+    const type = $derived(typeof value);
+    const isBoolean = $derived(type === 'boolean' || value instanceof Boolean);
+    const isObject = $derived((type === 'object' || value instanceof Object) && value !== null);
+    const isNull = $derived(value === null);
+    const isEmptyValue = $derived(isEmpty(value));
 
     function isEmpty(value: unknown) {
         if (value === undefined) {

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="breadcrumb-list"
 	class={cn(
-		"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
+		"text-muted-foreground flex flex-wrap items-center gap-1.5 wrap-break-word text-sm sm:gap-2.5",
 		className
 	)}
 	{...restProps}

src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/navigation-command.svelte

@@ -6,12 +6,14 @@
 
     let { open = $bindable(), routes }: { open: boolean; routes: NavigationItem[] } = $props();
 
-    const groupedRoutes: Record<string, NavigationItem[]> = Object.entries(Object.groupBy(routes, (item: NavigationItem) => item.group)).reduce(
-        (acc, [key, value]) => {
-            if (value) acc[key] = value;
-            return acc;
-        },
-        {} as Record<string, NavigationItem[]>
+    const groupedRoutes = $derived(
+        Object.entries(Object.groupBy(routes, (item: NavigationItem) => item.group)).reduce(
+            (acc, [key, value]) => {
+                if (value) acc[key] = value;
+                return acc;
+            },
+            {} as Record<string, NavigationItem[]>
+        )
     );
 
     function closeCommandWindow() {

src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte

@@ -304,7 +304,7 @@
         <Sheet.Header>
             <Sheet.Title
                 >Event Details <Button
-                    href={resolve('/(app)/event/[eventId]', { eventId: selectedEventId })}
+                    href={selectedEventId ? resolve('/(app)/event/[eventId]', { eventId: selectedEventId }) : '#'}
                     size="sm"
                     title="Open in new window"
                     variant="ghost"><ExternalLink /></Button

src/Exceptionless.Web/ClientApp/src/routes/(app)/account/appearance/(components)/theme-preview.svelte

@@ -7,7 +7,7 @@
 
     let { mode }: Props = $props();
 
-    let resolvedMode = $state(mode !== 'system' ? mode : (systemPrefersMode.current ?? 'dark'));
+    const resolvedMode = $derived(mode !== 'system' ? mode : (systemPrefersMode.current ?? 'dark'));
 </script>
 
 {#if resolvedMode === 'light'}
@@ -16,7 +16,7 @@
             <!-- secondary-->
             <div class="space-y-2 rounded-md bg-[hsl(0,0%,100%)] p-2 shadow-xs">
                 <!--card -->
-                <div class="h-2 w-[80px] rounded-lg bg-[hsl(240,3.8%,46.1%)]"></div>
+                <div class="h-2 w-20 rounded-lg bg-[hsl(240,3.8%,46.1%)]"></div>
                 <!--muted-foreground -->
                 <div class="h-2 w-[100px] rounded-lg bg-[hsl(240,3.8%,46.1%)]"></div>
             </div>
@@ -36,7 +36,7 @@
             <!-- secondary-->
             <div class="space-y-2 rounded-md bg-[hsl(222,17%,11%)] p-2 shadow-xs">
                 <!--card -->
-                <div class="h-2 w-[80px] rounded-lg bg-[hsl(240,5%,64.9%)]"></div>
+                <div class="h-2 w-20 rounded-lg bg-[hsl(240,5%,64.9%)]"></div>
                 <!--muted-foreground -->
                 <div class="h-2 w-[100px] rounded-lg bg-[hsl(240,5%,64.9%)]"></div>
             </div>

src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte

@@ -330,8 +330,11 @@
     <Sheet.Content class="w-full overflow-y-auto sm:max-w-full md:w-5/6">
         <Sheet.Header>
             <Sheet.Title
-                >Event Details <Button href={resolve('/(app)/event/[eventId]', { eventId })} size="sm" title="Open in new window" variant="ghost"
-                    ><ExternalLink /></Button
+                >Event Details <Button
+                    href={eventId ? resolve('/(app)/event/[eventId]', { eventId }) : '#'}
+                    size="sm"
+                    title="Open in new window"
+                    variant="ghost"><ExternalLink /></Button
                 ></Sheet.Title
             >
         </Sheet.Header>