diff --git a/src/Exceptionless.Web/ClientApp/e2e/tests/table-toolbar-pagination.e2e.ts b/src/Exceptionless.Web/ClientApp/e2e/tests/table-toolbar-pagination.e2e.ts
index 2417bcc656..0be0965a93 100644
--- a/src/Exceptionless.Web/ClientApp/e2e/tests/table-toolbar-pagination.e2e.ts
+++ b/src/Exceptionless.Web/ClientApp/e2e/tests/table-toolbar-pagination.e2e.ts
@@ -3,7 +3,7 @@ import { resolve } from 'node:path';
 import { expect, test } from '../fixtures/e2e-test';
 import { seedRepresentativeEvent } from '../support/event-data';
 
-test('table toolbar remains accessible while moving between different-height result pages', async ({ e2eApi, e2eScenario, page }) => {
+test('floating table controls keep the first row visible between different-height result pages', async ({ e2eApi, e2eScenario, page }) => {
     for (let index = 1; index <= 6; index++) {
         await seedRepresentativeEvent(e2eApi, e2eScenario.userToken, {
             message: `${e2eScenario.message} ${index}`,
@@ -36,31 +36,96 @@ test('table toolbar remains accessible while moving between different-height res
     expect(firstToolbarBox).not.toBeNull();
     expect(firstGridBox).not.toBeNull();
     expect(await toolbar.evaluate((element) => getComputedStyle(element).position)).toBe('sticky');
+    await expect(toolbar).not.toHaveAttribute('data-floating');
     expect(await toolbar.evaluate((element) => element.nextElementSibling?.getAttribute('data-slot'))).toBe('data-table-body');
     expect(firstToolbarBox!.height).toBeLessThanOrEqual(34);
     expect(firstGridBox!.y - (firstToolbarBox!.y + firstToolbarBox!.height)).toBeLessThanOrEqual(8);
     expect(firstToolbarBox!.y + firstToolbarBox!.height).toBeLessThanOrEqual(firstGridBox!.y);
 
+    const scrollContainer = page.locator('main').locator('..');
+    const scrollTopAtPageTop = await scrollContainer.evaluate((element) => element.scrollTop);
+    await pager.getByRole('button', { name: 'Go to next page' }).click();
+    await expect(pager.getByLabel('Page 2 of 2')).toBeVisible();
+    await expect.poll(() => scrollContainer.evaluate((element) => element.scrollTop)).toBe(scrollTopAtPageTop);
+    await pager.getByRole('button', { name: 'Go to first page' }).click();
+    await expect(pager.getByLabel('Page 1 of 2')).toBeVisible();
+    await expect.poll(() => scrollContainer.evaluate((element) => element.scrollTop)).toBe(scrollTopAtPageTop);
+
     if (process.env.E2E_CAPTURE_PAGER_TOOLBAR_SCREENSHOTS === 'true') {
         await page.screenshot({ path: resolve(process.cwd(), '../../../dogfood-output/pager-toolbar/desktop-page-1.png') });
     }
 
+    const scrollTopBeforeVisiblePageSizeChange = await scrollContainer.evaluate((element) => element.scrollTop);
+    await pager.getByLabel('Rows per page').click();
+    await page.getByRole('option', { name: '10 rows' }).click();
+    await expect(pager.getByLabel('Page 1 of 1')).toBeVisible();
+    await expect.poll(() => scrollContainer.evaluate((element) => element.scrollTop)).toBe(scrollTopBeforeVisiblePageSizeChange);
+
+    await page.setViewportSize({ height: 400, width: 1280 });
+    await scrollContainer.evaluate((element) => element.scrollTo({ top: element.scrollHeight }));
+    await expect(toolbar).toHaveAttribute('data-floating', '');
+
+    if (process.env.E2E_CAPTURE_PAGER_TOOLBAR_SCREENSHOTS === 'true') {
+        await page.screenshot({ path: resolve(process.cwd(), '../../../dogfood-output/pager-toolbar/desktop-floating.png') });
+
+        const wasDark = await page.locator('html').evaluate((element) => element.classList.contains('dark'));
+        await page.locator('html').evaluate((element) => {
+            element.classList.add('dark');
+            element.style.colorScheme = 'dark';
+        });
+        await page.screenshot({ path: resolve(process.cwd(), '../../../dogfood-output/pager-toolbar/desktop-floating-dark.png') });
+
+        if (!wasDark) {
+            await page.locator('html').evaluate((element) => {
+                element.classList.remove('dark');
+                element.style.colorScheme = 'light';
+            });
+        }
+    }
+
+    const scrollTopBeforeHiddenPageSizeChange = await scrollContainer.evaluate((element) => element.scrollTop);
+    await pager.getByLabel('Rows per page').click();
+    await page.getByRole('option', { name: '5 rows' }).click();
+    await expect(pager.getByLabel('Page 1 of 2')).toBeVisible();
+    await expect.poll(() => scrollContainer.evaluate((element) => element.scrollTop)).toBeLessThan(scrollTopBeforeHiddenPageSizeChange);
+    await scrollContainer.evaluate((element) => element.scrollTo({ top: element.scrollHeight }));
+    await expect(toolbar).toHaveAttribute('data-floating', '');
+
     const nextButton = pager.getByRole('button', { name: 'Go to next page' });
-    const scrollContainer = page.locator('main').locator('..');
     const scrollTopBeforePaging = await scrollContainer.evaluate((element) => element.scrollTop);
     await nextButton.focus();
     await nextButton.click();
     await expect(pager.getByLabel('Page 2 of 2')).toBeVisible();
     await expect(pager.getByRole('button', { name: 'Go to next page' })).toBeFocused();
     await expect(bulkActionsButton).toHaveAttribute('aria-disabled', 'true');
-    await expect.poll(() => scrollContainer.evaluate((element) => element.scrollTop)).toBe(scrollTopBeforePaging);
+    await expect(toolbar).toHaveAttribute('data-floating', '');
+
+    const scrollTopAfterPaging = await scrollContainer.evaluate((element) => element.scrollTop);
+    expect(scrollTopAfterPaging).toBeGreaterThan(0);
+    expect(scrollTopAfterPaging).toBeLessThan(scrollTopBeforePaging);
 
     const secondToolbarBox = await toolbar.boundingBox();
     const secondGridBox = await grid.boundingBox();
+    const firstRow = page.locator('tbody tr:visible').first();
+    await expect(firstRow).toBeVisible({ timeout: 30_000 });
+    const firstRowBox = await firstRow.boundingBox();
     expect(secondToolbarBox).not.toBeNull();
     expect(secondGridBox).not.toBeNull();
+    expect(firstRowBox).not.toBeNull();
     expect(secondToolbarBox!.y).toBeGreaterThanOrEqual(8);
     expect(secondToolbarBox!.y + secondToolbarBox!.height).toBeLessThanOrEqual(secondGridBox!.y);
+    expect(firstRowBox!.y).toBeGreaterThanOrEqual(secondToolbarBox!.y + secondToolbarBox!.height);
+    expect(firstRowBox!.y).toBeLessThan(400);
+
+    const scrollTopWithFirstRowVisible = await scrollContainer.evaluate((element) => element.scrollTop);
+    const previousButton = pager.getByRole('button', { name: 'Go to previous page' });
+    await previousButton.click();
+    await expect(pager.getByLabel('Page 1 of 2')).toBeVisible();
+    await expect.poll(() => scrollContainer.evaluate((element) => element.scrollTop)).toBe(scrollTopWithFirstRowVisible);
+
+    await pager.getByRole('button', { name: 'Go to next page' }).click();
+    await expect(pager.getByLabel('Page 2 of 2')).toBeVisible();
+    await expect.poll(() => scrollContainer.evaluate((element) => element.scrollTop)).toBe(scrollTopWithFirstRowVisible);
 
     await page.locator('main').evaluate((element) => element.parentElement?.scrollTo({ top: element.parentElement.scrollHeight }));
     const appFooter = page.getByRole('link', { exact: true, name: 'Terms' }).locator('xpath=ancestor::div[contains(@class, "border-t")][1]');
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-footer.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-footer.svelte
index e247502bf5..2e5938aa01 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-footer.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-footer.svelte
@@ -10,6 +10,7 @@
 
     import DataTablePageCount from './data-table-page-count.svelte';
     import DataTablePagination from './data-table-pagination.svelte';
+    import { findScrollableAncestor } from './data-table-scroll';
     import DataTableSelection from './data-table-selection.svelte';
 
     type Props = HTMLAttributes<Element> & {
@@ -19,17 +20,61 @@
     };
 
     let { children, class: className, table, variant = 'simple' }: Props = $props();
+
+    let isFloating = $state(false);
+    let toolbarElement = $state<HTMLDivElement>();
+
+    $effect(() => {
+        const element = toolbarElement;
+        if (variant !== 'floating' || !element || typeof window === 'undefined') {
+            isFloating = false;
+            return;
+        }
+
+        const scrollContainer = findScrollableAncestor(element);
+
+        function updateFloatingState(): void {
+            const styles = window.getComputedStyle(element!);
+            const stickyTop = Number.parseFloat(styles.top);
+
+            if (styles.position !== 'sticky' || !Number.isFinite(stickyTop)) {
+                isFloating = false;
+                return;
+            }
+
+            const scrollContainerTop = scrollContainer?.getBoundingClientRect().top ?? 0;
+            const stickyBoundary = scrollContainerTop + (scrollContainer?.clientTop ?? 0) + stickyTop;
+            isFloating = Math.abs(element!.getBoundingClientRect().top - stickyBoundary) < 1;
+        }
+
+        updateFloatingState();
+        const scrollTarget = scrollContainer ?? window;
+        scrollTarget.addEventListener('scroll', updateFloatingState, {
+            passive: true
+        });
+        window.addEventListener('resize', updateFloatingState, {
+            passive: true
+        });
+
+        return () => {
+            scrollTarget.removeEventListener('scroll', updateFloatingState);
+            window.removeEventListener('resize', updateFloatingState);
+        };
+    });
 </script>
 
 <div
     aria-label="Table controls"
+    bind:this={toolbarElement}
     class={[
         'flex w-full items-center',
         variant === 'floating'
             ? 'border-border bg-background/95 sticky top-2 z-30 flex-wrap justify-between gap-0 rounded-lg border backdrop-blur-sm'
             : 'justify-end gap-2',
+        isFloating && 'floating-glow',
         className
     ]}
+    data-floating={isFloating ? '' : undefined}
     data-slot="data-table-footer"
     data-variant={variant}
     role="toolbar"
@@ -44,3 +89,11 @@
         </div>
     {/if}
 </div>
+
+<style>
+    .floating-glow {
+        box-shadow:
+            0 0 0 1px color-mix(in oklab, var(--foreground) 32%, transparent),
+            0 0 14px 2px color-mix(in oklab, var(--foreground) 18%, transparent);
+    }
+</style>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-page-size.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-page-size.svelte
index 14affe7934..dd8269bfd3 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-page-size.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-page-size.svelte
@@ -10,13 +10,14 @@
 
     interface Props {
         joined?: boolean;
+        onBeforePageSizeChange?: () => void;
         onPageSizeChange?: () => void;
         size?: 'default' | 'sm';
         table: Table<StockFeatures, TData>;
         value: number;
     }
 
-    let { joined = false, onPageSizeChange, size = 'sm', table, value = $bindable() }: Props = $props();
+    let { joined = false, onBeforePageSizeChange, onPageSizeChange, size = 'sm', table, value = $bindable() }: Props = $props();
 
     type Item = { label: string; value: string };
     const items: Item[] = [
@@ -50,6 +51,7 @@
     let selected = $derived((items.find((item) => item.value === valueString) || items[0]) as Item);
 
     function onValueChange(newValue: string) {
+        onBeforePageSizeChange?.();
         value = Number(newValue);
         table.setPageSize(Number(newValue));
         onPageSizeChange?.();
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pager.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pager.svelte
index d608bcb900..cdcd05697a 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pager.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pager.svelte
@@ -14,6 +14,7 @@
     import ChevronsLeftIcon from '@lucide/svelte/icons/chevrons-left';
 
     import DataTablePageSize from './data-table-page-size.svelte';
+    import { scrollTableToFirstRow } from './data-table-scroll';
 
     interface Props {
         table: Table<StockFeatures, TData>;
@@ -22,34 +23,54 @@
     }
 
     let { table, value = $bindable(), variant = 'simple' }: Props = $props();
+    let pagerElement = $state<HTMLElement>();
 
     const currentPage = $derived((table.options.state?.pagination?.pageIndex ?? table.store.state.pagination.pageIndex) + 1);
     const totalPages = $derived(Math.max(1, table.getPageCount() || 1));
     const canGoNext = $derived(currentPage < totalPages);
     const canGoPrevious = $derived(currentPage > 1);
 
-    function goToFirstPage(): void {
+    function goToFirstPage(event: MouseEvent): void {
         if (canGoPrevious) {
-            table.setPageIndex(0);
+            goToPage(0, event);
         }
     }
 
-    function goToNextPage(): void {
+    function goToNextPage(event: MouseEvent): void {
         if (canGoNext) {
-            table.setPageIndex(currentPage);
+            goToPage(currentPage, event);
         }
     }
 
-    function goToPreviousPage(): void {
+    function goToPreviousPage(event: MouseEvent): void {
         if (canGoPrevious) {
-            table.setPageIndex(currentPage - 2);
+            goToPage(currentPage - 2, event);
         }
     }
+
+    function goToPage(pageIndex: number, event: MouseEvent): void {
+        const trigger = event.currentTarget as HTMLElement;
+        if (shouldAdjustScroll(trigger)) {
+            scrollTableToFirstRow(trigger);
+        }
+
+        table.setPageIndex(pageIndex);
+    }
+
+    function onBeforePageSizeChange(): void {
+        if (pagerElement && shouldAdjustScroll(pagerElement)) {
+            scrollTableToFirstRow(pagerElement);
+        }
+    }
+
+    function shouldAdjustScroll(trigger: HTMLElement): boolean {
+        return variant === 'floating' && trigger.closest('[data-slot="data-table-footer"]')?.hasAttribute('data-floating') === true;
+    }
 </script>
 
-<nav aria-label="Table pagination" class="ml-auto shrink-0" data-variant={variant}>
+<nav aria-label="Table pagination" bind:this={pagerElement} class="ml-auto shrink-0" data-variant={variant}>
     <ButtonGroup.Root aria-label="Pagination controls">
-        <DataTablePageSize bind:value joined={variant === 'floating'} size="default" {table} />
+        <DataTablePageSize bind:value joined={variant === 'floating'} {onBeforePageSizeChange} size="default" {table} />
         <ButtonGroup.Text
             aria-label={`Page ${currentPage} of ${totalPages}`}
             class={cn('min-w-14 justify-center select-none', variant === 'floating' && 'rounded-none border-y-0')}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pager.svelte.test.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pager.svelte.test.ts
index 8486a1b6c5..21525c6e34 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pager.svelte.test.ts
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pager.svelte.test.ts
@@ -1,4 +1,4 @@
-import { cleanup, fireEvent, render, screen } from '@testing-library/svelte';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/svelte';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import DataTablePageSize from './data-table-page-size.svelte';
@@ -14,6 +14,7 @@ describe('DataTablePager', () => {
     afterEach(() => {
         cleanup();
         scrollIntoView.mockReset();
+        vi.restoreAllMocks();
     });
 
     it('joins bulk actions and pagination in one full-width sticky toolbar', () => {
@@ -29,6 +30,9 @@ describe('DataTablePager', () => {
         expect(toolbar?.classList.contains('border')).toBe(true);
         expect(toolbar?.classList.contains('border-y')).toBe(false);
         expect(toolbar?.classList.contains('rounded-lg')).toBe(true);
+        expect(toolbar?.classList.contains('border-border')).toBe(true);
+        expect(toolbar?.getAttribute('data-floating')).toBeNull();
+        expect(toolbar?.classList.contains('floating-glow')).toBe(false);
         expect(toolbar?.classList.contains('gap-0')).toBe(true);
         expect(toolbar?.classList.contains('flex-wrap')).toBe(true);
         expect(toolbar?.classList.contains('sm:flex-nowrap')).toBe(false);
@@ -71,6 +75,8 @@ describe('DataTablePager', () => {
         expect(toolbar?.getAttribute('data-variant')).toBe('simple');
         expect(toolbar?.classList.contains('sticky')).toBe(false);
         expect(toolbar?.classList.contains('border')).toBe(false);
+        expect(toolbar?.getAttribute('data-floating')).toBeNull();
+        expect(toolbar?.classList.contains('floating-glow')).toBe(false);
         expect(toolbar?.classList.contains('justify-end')).toBe(true);
         expect(pager.getAttribute('data-variant')).toBe('simple');
 
@@ -82,6 +88,117 @@ describe('DataTablePager', () => {
         expect(screen.getByRole('button', { name: 'Go to next page' }).classList.contains('border-r-0')).toBe(false);
     });
 
+    it('adds a neutral all-sided glow only after the sticky toolbar starts floating', async () => {
+        render(DataTablePagerTestHarness, { onPageIndexChange: vi.fn(), onPageSizeChange: vi.fn(), variant: 'floating' });
+
+        const toolbar = screen.getByRole('toolbar', { name: 'Table controls' });
+        const scrollContainer = screen.getByTestId('scroll-container');
+        const originalGetComputedStyle = window.getComputedStyle.bind(window);
+        vi.spyOn(window, 'getComputedStyle').mockImplementation((element) => {
+            if (element === toolbar) {
+                return { position: 'sticky', top: '8px' } as CSSStyleDeclaration;
+            }
+
+            return originalGetComputedStyle(element);
+        });
+        vi.spyOn(toolbar, 'getBoundingClientRect').mockReturnValue({
+            bottom: 40,
+            height: 32,
+            left: 0,
+            right: 100,
+            toJSON: () => ({}),
+            top: 8,
+            width: 100,
+            x: 0,
+            y: 8
+        });
+
+        scrollContainer.dispatchEvent(new Event('scroll'));
+
+        await waitFor(() => expect(toolbar.getAttribute('data-floating')).toBe(''));
+        expect(toolbar.classList.contains('floating-glow')).toBe(true);
+    });
+
+    it('positions the first row beneath floating controls before changing pages', async () => {
+        const onPageIndexChange = vi.fn();
+        render(DataTablePagerTestHarness, { onPageIndexChange, onPageSizeChange: vi.fn(), variant: 'floating' });
+
+        const scrollContainer = screen.getByTestId('scroll-container');
+        const tableRoot = document.querySelector<HTMLElement>('[data-slot="data-table"]')!;
+        const toolbar = screen.getByRole('toolbar', { name: 'Table controls' });
+        const tableBody = document.querySelector<HTMLElement>('[data-slot="data-table-body"]')!;
+        const firstRow = tableBody.querySelector<HTMLElement>('tbody > tr:not(.hidden)')!;
+        toolbar.setAttribute('data-floating', '');
+        const scrollTo = vi.fn();
+        scrollContainer.scrollTop = 400;
+        scrollContainer.scrollTo = scrollTo;
+        vi.spyOn(scrollContainer, 'getBoundingClientRect').mockReturnValue(createRect({ top: 60 }));
+        vi.spyOn(toolbar, 'getBoundingClientRect').mockReturnValue(createRect({ height: 32, top: 68 }));
+        vi.spyOn(tableBody, 'getBoundingClientRect').mockReturnValue(createRect({ top: -100 }));
+        vi.spyOn(firstRow, 'getBoundingClientRect').mockReturnValue(createRect({ bottom: -40, height: 40, top: -80 }));
+
+        const originalGetComputedStyle = window.getComputedStyle.bind(window);
+        vi.spyOn(window, 'getComputedStyle').mockImplementation((element) => {
+            if (element === toolbar) {
+                return { position: 'sticky', top: '8px' } as CSSStyleDeclaration;
+            }
+
+            if (element === tableRoot) {
+                return { rowGap: '8px' } as CSSStyleDeclaration;
+            }
+
+            return originalGetComputedStyle(element);
+        });
+
+        const nextButton = screen.getByRole('button', { name: 'Go to next page' });
+        nextButton.focus();
+        await fireEvent.click(nextButton);
+
+        expect(scrollTo).toHaveBeenCalledWith({ behavior: 'auto', top: 192 });
+        expect(onPageIndexChange).toHaveBeenCalledWith(1);
+        expect(document.activeElement).toBe(nextButton);
+    });
+
+    it('preserves the scroll position when the first row is already visible', async () => {
+        const onPageIndexChange = vi.fn();
+        render(DataTablePagerTestHarness, { onPageIndexChange, onPageSizeChange: vi.fn(), variant: 'floating' });
+
+        const scrollContainer = screen.getByTestId('scroll-container');
+        const tableRoot = document.querySelector<HTMLElement>('[data-slot="data-table"]')!;
+        const toolbar = screen.getByRole('toolbar', { name: 'Table controls' });
+        const tableBody = document.querySelector<HTMLElement>('[data-slot="data-table-body"]')!;
+        const firstRow = tableBody.querySelector<HTMLElement>('tbody > tr:not(.hidden)')!;
+        toolbar.setAttribute('data-floating', '');
+        const scrollTo = vi.fn();
+        scrollContainer.scrollTop = 100;
+        scrollContainer.scrollTo = scrollTo;
+        vi.spyOn(scrollContainer, 'getBoundingClientRect').mockReturnValue(createRect({ bottom: 260, height: 200, top: 60 }));
+        vi.spyOn(toolbar, 'getBoundingClientRect').mockReturnValue(createRect({ bottom: 100, height: 32, top: 68 }));
+        vi.spyOn(tableBody, 'getBoundingClientRect').mockReturnValue(createRect({ top: 108 }));
+        vi.spyOn(firstRow, 'getBoundingClientRect').mockReturnValue(createRect({ bottom: 148, height: 40, top: 108 }));
+
+        const originalGetComputedStyle = window.getComputedStyle.bind(window);
+        vi.spyOn(window, 'getComputedStyle').mockImplementation((element) => {
+            if (element === toolbar) {
+                return { position: 'sticky', top: '8px' } as CSSStyleDeclaration;
+            }
+
+            if (element === tableRoot) {
+                return { rowGap: '8px' } as CSSStyleDeclaration;
+            }
+
+            return originalGetComputedStyle(element);
+        });
+
+        const nextButton = screen.getByRole('button', { name: 'Go to next page' });
+        nextButton.focus();
+        await fireEvent.click(nextButton);
+
+        expect(scrollTo).not.toHaveBeenCalled();
+        expect(onPageIndexChange).toHaveBeenCalledWith(1);
+        expect(document.activeElement).toBe(nextButton);
+    });
+
     it('keeps a standalone page-size selector fully bordered', () => {
         const table = { setPageSize: vi.fn() } as never;
         render(DataTablePageSize, { table, value: 10 });
@@ -134,3 +251,18 @@ describe('DataTablePager', () => {
         expect(document.activeElement).toBe(previousButton);
     });
 });
+
+function createRect(overrides: Partial<DOMRect> = {}): DOMRect {
+    return {
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        toJSON: () => ({}),
+        top: 0,
+        width: 0,
+        x: 0,
+        y: 0,
+        ...overrides
+    };
+}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pager.test-harness.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pager.test-harness.svelte
index e526aba2c5..d958c9aec9 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pager.test-harness.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pager.test-harness.svelte
@@ -45,9 +45,23 @@
     } as never;
 </script>
 
-<DataTableRoot>
-    <DataTableFooter {table} {variant}>
-        <button type="button">Actions</button>
-        <DataTablePager bind:value={limit} {table} {variant} />
-    </DataTableFooter>
-</DataTableRoot>
+<div data-testid="scroll-container" style="height: 200px; overflow-y: auto;">
+    <DataTableRoot>
+        <DataTableFooter {table} {variant}>
+            <button type="button">Actions</button>
+            <DataTablePager bind:value={limit} {table} {variant} />
+        </DataTableFooter>
+        <div data-slot="data-table-body">
+            <table>
+                <tbody>
+                    <tr class="hidden">
+                        <td>No data</td>
+                    </tr>
+                    <tr>
+                        <td>First row</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DataTableRoot>
+</div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-scroll.ts b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-scroll.ts
new file mode 100644
index 0000000000..3a73122961
--- /dev/null
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-scroll.ts
@@ -0,0 +1,43 @@
+export function findScrollableAncestor(element: HTMLElement): HTMLElement | null {
+    let parent = element.parentElement;
+
+    while (parent) {
+        const { overflowY } = window.getComputedStyle(parent);
+        if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {
+            return parent;
+        }
+
+        parent = parent.parentElement;
+    }
+
+    return null;
+}
+
+export function scrollTableToFirstRow(trigger: HTMLElement): void {
+    const tableRoot = trigger.closest<HTMLElement>('[data-slot="data-table"]');
+    const toolbar = tableRoot?.querySelector<HTMLElement>('[data-slot="data-table-footer"]');
+    const tableBody = tableRoot?.querySelector<HTMLElement>('[data-slot="data-table-body"]');
+    const scrollContainer = tableRoot ? findScrollableAncestor(tableRoot) : null;
+    if (!tableRoot || !toolbar || !tableBody || !scrollContainer) {
+        return;
+    }
+
+    const toolbarStyles = window.getComputedStyle(toolbar);
+    const tableStyles = window.getComputedStyle(tableRoot);
+    const stickyTop = Number.parseFloat(toolbarStyles.top) || 0;
+    const rowGap = Number.parseFloat(tableStyles.rowGap) || 0;
+    const scrollContainerRect = scrollContainer.getBoundingClientRect();
+    const toolbarRect = toolbar.getBoundingClientRect();
+    const tableBodyRect = tableBody.getBoundingClientRect();
+    const firstRowRect = tableBody.querySelector<HTMLElement>('tbody > tr:not(.hidden)')?.getBoundingClientRect() ?? tableBodyRect;
+    const visibleTop = Math.max(scrollContainerRect.top + scrollContainer.clientTop, toolbarRect.bottom);
+    const visibleBottom = scrollContainerRect.bottom - (scrollContainer.offsetHeight - scrollContainer.clientHeight - scrollContainer.clientTop);
+    if (firstRowRect.top >= visibleTop && firstRowRect.top < visibleBottom) {
+        return;
+    }
+
+    const tableBodyContentTop = scrollContainer.scrollTop + tableBodyRect.top - scrollContainerRect.top - scrollContainer.clientTop;
+    const targetScrollTop = Math.max(0, tableBodyContentTop - toolbarRect.height - rowGap - stickyTop);
+
+    scrollContainer.scrollTo({ behavior: 'auto', top: targetScrollTop });
+}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table.svelte
index 5d5099f949..87e5619069 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table.svelte
@@ -11,3 +11,9 @@
 <div class="flex flex-col gap-2" data-slot="data-table">
     {@render children()}
 </div>
+
+<style>
+    :global([data-slot='data-table']:has(> [data-slot='data-table-footer'][data-variant='floating'])) {
+        min-height: calc(100dvh - 4rem);
+    }
+</style>