From 6eefb4173cf2e5a8e789cd60be326966f8c708dd Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Mon, 27 Oct 2025 13:54:15 -0700
Subject: [PATCH] add improved truncation between tablets and phones

---
 src/components/hooks/useMobile.ts    | 3 ++-
 src/components/metrics/ListTable.tsx | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/hooks/useMobile.ts b/src/components/hooks/useMobile.ts
index e3afc5ee..6b40f3da 100644
--- a/src/components/hooks/useMobile.ts
+++ b/src/components/hooks/useMobile.ts
@@ -3,6 +3,7 @@ import { useBreakpoint } from '@umami/react-zen';
 export function useMobile() {
   const breakpoint = useBreakpoint();
   const isMobile = ['xs', 'sm', 'md'].includes(breakpoint);
+  const isPhone = ['xs', 'sm'].includes(breakpoint);
 
-  return { breakpoint, isMobile };
+  return { breakpoint, isMobile, isPhone };
 }
diff --git a/src/components/metrics/ListTable.tsx b/src/components/metrics/ListTable.tsx
index 3aef2b28..303556b0 100644
--- a/src/components/metrics/ListTable.tsx
+++ b/src/components/metrics/ListTable.tsx
@@ -42,7 +42,7 @@ export function ListTable({
   currency,
 }: ListTableProps) {
   const { formatMessage, labels } = useMessages();
-  const { isMobile } = useMobile();
+  const { isPhone } = useMobile();
 
   const getRow = (row: ListData, index: number) => {
     const { label, count, percent } = row;
@@ -57,7 +57,7 @@ export function ListTable({
         showPercentage={showPercentage}
         change={renderChange ? renderChange(row, index) : null}
         currency={currency}
-        isMobile={isMobile}
+        isMobile={isPhone}
       />
     );
   };