From cf2ab575ba678f36c52e55ebddf5310cc3e904b1 Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Thu, 23 Apr 2026 11:24:32 -0700
Subject: [PATCH] mobile-friendly changes

---
 .../[websiteId]/event-data/EventDataPivotTable.tsx         | 7 ++++---
 .../[websiteId]/event-data/EventDataPropertyChart.tsx      | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/event-data/EventDataPivotTable.tsx b/src/app/(main)/websites/[websiteId]/event-data/EventDataPivotTable.tsx
index f2cb20172..a0aad0e39 100644
--- a/src/app/(main)/websites/[websiteId]/event-data/EventDataPivotTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/event-data/EventDataPivotTable.tsx
@@ -7,7 +7,7 @@ import { Empty } from '@/components/common/Empty';
 import Link from '@/components/common/Link';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Pager } from '@/components/common/Pager';
-import { useEventDataPivotQuery, useEventDataPropertiesQuery, useMessages, useNavigation } from '@/components/hooks';
+import { useEventDataPivotQuery, useEventDataPropertiesQuery, useMessages, useMobile, useNavigation } from '@/components/hooks';
 
 export function EventDataPivotTable({
   websiteId,
@@ -18,6 +18,7 @@ export function EventDataPivotTable({
 }) {
   const { t, labels } = useMessages();
   const { router, updateParams } = useNavigation();
+  const { isMobile } = useMobile();
 
   const propertiesQuery = useEventDataPropertiesQuery(websiteId);
   const pivotQuery = useEventDataPivotQuery(websiteId, eventName);
@@ -72,8 +73,8 @@ export function EventDataPivotTable({
         renderEmpty={() => <Empty />}
       >
         <Column gap="4" minWidth="0" width="100%" maxWidth="100%">
-          <Column minWidth="0" width="100%" maxWidth="100%" overflow="hidden">
-            <DataTable data={tableQuery?.data} style={{ width: '100%' }}>
+          <Column minWidth="0" width="100%" maxWidth="100%" overflow={isMobile ? undefined : 'hidden'}>
+            <DataTable data={tableQuery?.data} style={{ width: '100%' }} displayMode={isMobile ? 'cards' : 'table'}>
               <DataColumn id="session" label={t(labels.session)} width="0.75fr">
                 {(row: any) => (
                   <Link href={updateParams({ session: row.sessionId })}>
diff --git a/src/app/(main)/websites/[websiteId]/event-data/EventDataPropertyChart.tsx b/src/app/(main)/websites/[websiteId]/event-data/EventDataPropertyChart.tsx
index 940ec7bc3..5a7f8e5d1 100644
--- a/src/app/(main)/websites/[websiteId]/event-data/EventDataPropertyChart.tsx
+++ b/src/app/(main)/websites/[websiteId]/event-data/EventDataPropertyChart.tsx
@@ -144,7 +144,7 @@ export function EventDataPropertyChart({
         error={valuesQuery.error}
         minHeight="300px"
       >
-        <Grid columns="1fr 1fr" gap padding="2" alignItems="start">
+        <Grid columns={{ base: '1fr', md: '1fr 1fr' }} gap padding="2" alignItems="start">
           <ListTable title={propertyName} metric={t(labels.count)} data={tableData} />
           {pieChartData && <PieChart type="doughnut" chartData={pieChartData} />}
         </Grid>