From 665a60dbc2f0f942e5fa6f35332698c93cba3cab Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Wed, 30 Apr 2025 20:18:36 -0700
Subject: [PATCH] Updated session details.

---
 .../[sessionId]/SessionDetailsPage.tsx        | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
index c16ecbcb..f4a1def0 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionDetailsPage.tsx
@@ -8,6 +8,7 @@ import { SessionActivity } from './SessionActivity';
 import { SessionData } from './SessionData';
 import { SessionInfo } from './SessionInfo';
 import { SessionStats } from './SessionStats';
+import { Panel } from '@/components/common/Panel';
 
 export function SessionDetailsPage({
   websiteId,
@@ -22,27 +23,33 @@ export function SessionDetailsPage({
     <LoadingPanel {...query} loadingIcon="spinner" data={data}>
       <WebsiteHeader websiteId={websiteId} />
       <Grid
-        gap="9"
+        gap
         columns={{ xs: '1fr', sm: '1fr', md: '1fr 1fr', lg: '1fr 2fr 1fr', xl: '1fr 2fr 1fr' }}
       >
-        <Column gap="6" maxWidth="200px">
-          <Row justifyContent="center">
-            <Avatar seed={data?.id} size={128} />
-          </Row>
-          <SessionInfo data={data} />
-        </Column>
-        <Column gap="6">
-          <SessionStats data={data} />
-          <SessionActivity
-            websiteId={websiteId}
-            sessionId={sessionId}
-            startDate={data?.firstAt}
-            endDate={data?.lastAt}
-          />
-        </Column>
-        <Column gap="6">
-          <SessionData websiteId={websiteId} sessionId={sessionId} />
-        </Column>
+        <Panel>
+          <Column gap="6" maxWidth="200px">
+            <Row justifyContent="center">
+              <Avatar seed={data?.id} size={128} />
+            </Row>
+            <SessionInfo data={data} />
+          </Column>
+        </Panel>
+        <Panel>
+          <Column gap="6">
+            <SessionStats data={data} />
+            <SessionActivity
+              websiteId={websiteId}
+              sessionId={sessionId}
+              startDate={data?.firstAt}
+              endDate={data?.lastAt}
+            />
+          </Column>
+        </Panel>
+        <Panel>
+          <Column gap="6">
+            <SessionData websiteId={websiteId} sessionId={sessionId} />
+          </Column>
+        </Panel>
       </Grid>
     </LoadingPanel>
   );