Responsive updates.

This commit is contained in:
Mike Cao 2025-10-09 17:14:09 -07:00
parent e4ce7c9071
commit 8aa4192576
14 changed files with 976 additions and 917 deletions

View file

@ -7,7 +7,7 @@ export interface MetricsBarProps extends GridProps {
export function MetricsBar({ children, ...props }: MetricsBarProps) {
return (
<Grid columns="repeat(auto-fit, minmax(200px, 1fr))" gap {...props}>
<Grid columns="repeat(auto-fit, minmax(170px, 1fr))" gap {...props}>
{children}
</Grid>
);

View file

@ -1,11 +1,11 @@
import { useEffect, useMemo } from 'react';
import { Icon, Text, Row, Grid } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { useMessages, useNavigation, useWebsiteMetricsQuery } from '@/components/hooks';
import { Maximize } from '@/components/icons';
import { MetricLabel } from '@/components/metrics/MetricLabel';
import { percentFilter } from '@/lib/filters';
import { Icon, Row, Text } from '@umami/react-zen';
import { useEffect, useMemo } from 'react';
import { ListTable, ListTableProps } from './ListTable';
export interface MetricsTableProps extends ListTableProps {
@ -77,21 +77,19 @@ export function MetricsTable({
error={error}
minHeight="400px"
>
<div style={{ display: 'grid', gridTemplateRows: '1fr auto', minHeight: '400px' }}>
<div>{data && <ListTable {...props} data={filteredData} renderLabel={renderLabel} />}</div>
<div>
{showMore && limit && (
<Row justifyContent="center" alignItems="flex-end">
<LinkButton href={updateParams({ view: type })} variant="quiet">
<Icon size="sm">
<Maximize />
</Icon>
<Text>{formatMessage(labels.more)}</Text>
</LinkButton>
</Row>
)}
</div>
</div>
<Grid>
{data && <ListTable {...props} data={filteredData} renderLabel={renderLabel} />}
{showMore && limit && (
<Row justifyContent="center" alignItems="flex-end">
<LinkButton href={updateParams({ view: type })} variant="quiet">
<Icon size="sm">
<Maximize />
</Icon>
<Text>{formatMessage(labels.more)}</Text>
</LinkButton>
</Row>
)}
</Grid>
</LoadingPanel>
);
}