add improved truncation between tablets and phones

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

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