Responsive fixes.

src/components/common/PageHeader.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Heading, Icon, Row, RowProps, Text, Column } from '@umami/react-zen';
+import { Heading, Icon, Row, Text, Column, Grid } from '@umami/react-zen';
 
 export function PageHeader({
   title,
@@ -8,7 +8,6 @@ export function PageHeader({
   icon,
   showBorder = true,
   children,
-  ...props
 }: {
   title: string;
   description?: string;
@@ -18,16 +17,13 @@ export function PageHeader({
   allowEdit?: boolean;
   className?: string;
   children?: ReactNode;
-} & RowProps) {
+}) {
   return (
-    <Row
-      justifyContent="space-between"
-      alignItems="center"
+    <Grid
+      columns={{ xs: '1fr', md: '1fr 1fr' }}
       paddingY="6"
       marginBottom="6"
       border={showBorder ? 'bottom' : undefined}
-      width="100%"
-      {...props}
     >
       <Column gap="2">
         {label}
@@ -46,6 +42,6 @@ export function PageHeader({
         )}
       </Column>
       <Row justifyContent="flex-end">{children}</Row>
-    </Row>
+    </Grid>
   );
 }

src/components/input/WebsiteDateFilter.tsx

@@ -28,6 +28,7 @@ export function WebsiteDateFilter({
     query: { compare = 'prev', offset = 0 },
   } = useNavigation();
   const disableForward = isAllTime || isAfter(dateRange.endDate, new Date());
+  const showCompare = allowCompare && !isAllTime;
 
   const websiteDateRange = useDateRangeQuery(websiteId);
 
@@ -62,7 +63,7 @@ export function WebsiteDateFilter({
   }, [dateRange]);
 
   return (
-    <Row gap>
+    <Row wrap="wrap" gap>
       {showButtons && !isAllTime && !isCustomRange && (
         <Row gap="1">
           <Button onPress={() => handleIncrement(-1)} variant="outline">
@@ -85,7 +86,7 @@ export function WebsiteDateFilter({
           renderDate={+offset !== 0}
         />
       </Row>
-      {allowCompare && !isAllTime && (
+      {showCompare && (
         <Row alignItems="center" gap>
           <Text weight="bold">VS</Text>
           <Row width="200px">

src/components/metrics/MetricsBar.tsx

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