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

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 });
     }
   };
 

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>

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) => {

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>