github/umami
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add improved truncation between tablets and phones

Browse Source
This commit is contained in:
Francis Cao
2025-10-27 13:54:15 -07:00
parent 74972bccb1
commit 6eefb4173c
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/hooks/useMobile.ts
View File

@@ -3,6 +3,7 @@ import { useBreakpoint } from '@umami/react-zen';
export function useMobile() { export function useMobile() {
const breakpoint = useBreakpoint(); const breakpoint = useBreakpoint();
const isMobile = ['xs', 'sm', 'md'].includes(breakpoint); const isMobile = ['xs', 'sm', 'md'].includes(breakpoint);
const isPhone = ['xs', 'sm'].includes(breakpoint);
return { breakpoint, isMobile }; return { breakpoint, isMobile, isPhone };
} }

4
src/components/metrics/ListTable.tsx
View File

@@ -42,7 +42,7 @@ export function ListTable({
currency, currency,
}: ListTableProps) { }: ListTableProps) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { isMobile } = useMobile(); const { isPhone } = useMobile();
const getRow = (row: ListData, index: number) => { const getRow = (row: ListData, index: number) => {
const { label, count, percent } = row; const { label, count, percent } = row;
@@ -57,7 +57,7 @@ export function ListTable({
showPercentage={showPercentage} showPercentage={showPercentage}
change={renderChange ? renderChange(row, index) : null} change={renderChange ? renderChange(row, index) : null}
currency={currency} currency={currency}
isMobile={isMobile} isMobile={isPhone}
/> />
); );
}; };