Session modal issues on mobile: scroll jumps to top on close, avatar overflow causes horizontal scroll #4358

Describe the Bug

Summary

The session detail modal has two mobile-viewport issues that hurt usability on phones:

1. Closing the modal scrolls the page back to the top instead of preserving the scroll position in the session list.
2. The header layout overflows horizontally — the avatar + ID field combo is wider than the modal, causing a horizontal scrollbar and the avatar to appear oversized relative to the screen.

Both are reproducible on mobile browsers (iOS Safari) and on desktop Chrome with DevTools device emulation enabled.

Issue 1: Closing the modal scrolls to top

Steps to reproduce

1. Open a website's Sessions page.
2. Scroll down the session list a few screens.
3. Open a session detail modal (tap the avatar).
4. Close the modal (tap backdrop / dismiss button).
5. The page scrolls back to the top.

Root cause

The session modal is controlled by a URL query param (session=...). Both opening and closing perform a client-side navigation:

• Open: SessionsDataTable.tsx → updateParams({ session: row.id })
• Close: SessionModal.tsx → router.push(updateParams({ session: undefined }))

The modal uses react-aria-components's Modal, whose usePreventScroll (from react-aria) locks scrolling by setting overflow: hidden on document.documentElement while open, and restores the original value on close.

The problem is a timing conflict between two operations that fire on close:

1. React Aria restores document.documentElement.overflow (from hidden back to the previous value).
2. In the same tick, router.push triggers a Next.js client-side navigation, which triggers scroll restoration.

Because the document's overflow is mid-transition (just unlocked, layout being recomputed), the browser / Next.js reads an incorrect scroll position and resets to 0.

This is consistent with it being reproducible on desktop Chrome device emulation (not just iOS), since the preventScrollStandard path (which sets overflow: hidden on <html>) is what non-iOS browsers use.

Relevant files:

• src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx — router.push(...) on close
• src/app/(main)/websites/[websiteId]/sessions/SessionProfileModal.tsx — same pattern on close
• src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx — updateParams({ session: row.id }) on open

Suggested fix

• Use router.replace instead of router.push when closing — avoids adding a history entry and tends to keep scroll restoration more stable.
• Or explicitly save/restore window.scrollY before opening and after closing.
• Or defer the router.push until after React Aria's scroll unlock has completed.

Issue 2: Avatar + ID field overflow causes horizontal scroll

Steps to reproduce

1. Open a session detail modal on a mobile-width viewport.
2. The modal header shows a large avatar next to a fixed-width ID field.
3. The header is wider than the modal → horizontal scrollbar appears, avatar looks oversized.

Root cause

In SessionProfile.tsx:

<Row justifyContent="center" alignItems="center" gap="6">
  <Avatar seed={data?.id} size={128} />
  <Column width="360px">
    <TextField label="ID" value={data?.id} allowCopy />
  </Column>
</Row>

### Database

PostgreSQL

### Relevant log output

```shell

Which Umami version are you using?

No response

How are you deploying your application?

No response

Which browser are you using?

No response