From 22176eb76de09aa6e4fd8a73d6896162028bc12c Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Thu, 2 Jul 2026 10:41:57 -0700
Subject: [PATCH] Fix: Session modal issues on mobile: scroll jumps to top on
 close, avatar overflow causes horizontal scroll. Closes #4358

---
 .../websites/[websiteId]/sessions/SessionModal.tsx |  2 +-
 .../[websiteId]/sessions/SessionProfile.tsx        | 14 ++++++++++----
 .../[websiteId]/sessions/SessionProfileModal.tsx   |  2 +-
 .../[websiteId]/sessions/SessionsTable.tsx         |  1 +
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx
index 26948b241..d0552f58c 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx
@@ -17,7 +17,7 @@ export function SessionModal({ websiteId, ...props }: SessionModalProps) {
   const isSharePage = pathname.includes('/share/');
   const handleOpenChange = (isOpen: boolean) => {
     if (!isOpen) {
-      router.push(updateParams({ session: undefined }));
+      router.replace(updateParams({ session: undefined }), { scroll: false });
     }
   };
 
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionProfile.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionProfile.tsx
index 7b05f07d7..ffc6ce7f1 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionProfile.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionProfile.tsx
@@ -13,7 +13,7 @@ import {
 import { X } from 'lucide-react';
 import { Avatar } from '@/components/common/Avatar';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { useMessages, useWebsiteSessionQuery } from '@/components/hooks';
+import { useMessages, useMobile, useWebsiteSessionQuery } from '@/components/hooks';
 import { SessionActivity } from './SessionActivity';
 import { SessionData } from './SessionData';
 import { SessionInfo } from './SessionInfo';
@@ -33,6 +33,7 @@ export function SessionProfile({
 }) {
   const { data, isLoading, error } = useWebsiteSessionQuery(websiteId, sessionId);
   const { t, labels } = useMessages();
+  const { isMobile } = useMobile();
 
   return (
     <LoadingPanel
@@ -54,9 +55,14 @@ export function SessionProfile({
             </Row>
           )}
           <Column gap="6">
-            <Row justifyContent="center" alignItems="center" gap="6">
-              <Avatar seed={data?.id} size={128} />
-              <Column width="360px">
+            <Row
+              justifyContent="center"
+              alignItems="center"
+              gap="6"
+              style={{ flexWrap: isMobile ? 'wrap' : 'nowrap' }}
+            >
+              <Avatar seed={data?.id} size={isMobile ? 80 : 128} />
+              <Column width={isMobile ? '100%' : '360px'} minWidth="0" maxWidth="360px">
                 <TextField label="ID" value={data?.id} allowCopy />
               </Column>
             </Row>
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionProfileModal.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionProfileModal.tsx
index b94be97ef..7bcdf0802 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionProfileModal.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionProfileModal.tsx
@@ -18,7 +18,7 @@ export function SessionProfileModal({
     const query = Object.fromEntries(searchParams.entries());
     delete query.session;
 
-    router.push(buildPath(`/websites/${websiteId}/sessions`, query));
+    router.replace(buildPath(`/websites/${websiteId}/sessions`, query), { scroll: false });
   };
 
   const handleOpenChange = (isOpen: boolean) => {
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
index 56e5f7243..9c974efb2 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
@@ -21,6 +21,7 @@ export function SessionsTable({
             href={
               getSessionHref ? getSessionHref(row) : `/websites/${websiteId}/sessions/${row.id}`
             }
+            scroll={getSessionHref ? false : undefined}
           >
             <Avatar seed={row.id} size={32} />
           </Link>