More mobile fixes.

src/app/(main)/MobileNav.tsx

@@ -9,7 +9,7 @@ import { MobileMenuButton } from '@/components/input/MobileMenuButton';
 
 export function MobileNav() {
   const { formatMessage, labels } = useMessages();
-  const { websiteId } = useNavigation();
+  const { websiteId, renderUrl } = useNavigation();
 
   const links = [
     {
@@ -42,7 +42,7 @@ export function MobileNav() {
                 <NavButton />
                 {links.map(link => {
                   return (
-                    <Link key={link.id} href={link.path}>
+                    <Link key={link.id} href={renderUrl(link.path)}>
                       <NavMenuItem>
                         <IconLabel icon={link.icon} label={link.label} />
                       </NavMenuItem>

src/app/(main)/websites/[websiteId]/cohorts/CohortAddButton.tsx

@@ -7,7 +7,13 @@ export function CohortAddButton({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <DialogButton icon={<Plus />} label={formatMessage(labels.cohort)} variant="primary">
+    <DialogButton
+      icon={<Plus />}
+      label={formatMessage(labels.cohort)}
+      variant="primary"
+      width="800px"
+      minHeight="300px"
+    >
       {({ close }) => {
         return <CohortEditForm websiteId={websiteId} onClose={close} />;
       }}

src/app/(main)/websites/[websiteId]/segments/SegmentAddButton.tsx

@@ -7,7 +7,12 @@ export function SegmentAddButton({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <DialogButton icon={<Plus />} label={formatMessage(labels.segment)} variant="primary">
+    <DialogButton
+      icon={<Plus />}
+      label={formatMessage(labels.segment)}
+      variant="primary"
+      width="800px"
+    >
       {({ close }) => {
         return <SegmentEditForm websiteId={websiteId} onClose={close} />;
       }}

src/app/(main)/websites/[websiteId]/sessions/SessionModal.tsx

@@ -1,4 +1,4 @@
-import { Dialog, Modal, ModalProps } from '@umami/react-zen';
+import { Dialog, Modal, ModalProps, Column } from '@umami/react-zen';
 import { SessionProfile } from '@/app/(main)/websites/[websiteId]/sessions/SessionProfile';
 import { useNavigation } from '@/components/hooks';
 
@@ -12,12 +12,6 @@ export function SessionModal({ websiteId, ...props }: SessionModalProps) {
     query: { session },
     updateParams,
   } = useNavigation();
-
-  const handleClose = (close: () => void) => {
-    router.push(updateParams({ session: undefined }));
-    close();
-  };
-
   const handleOpenChange = (isOpen: boolean) => {
     if (!isOpen) {
       router.push(updateParams({ session: undefined }));
@@ -25,25 +19,21 @@ export function SessionModal({ websiteId, ...props }: SessionModalProps) {
   };
 
   return (
-    <Modal isOpen={!!session} onOpenChange={handleOpenChange} isDismissable {...props}>
-      <Dialog
-        style={{
-          maxWidth: 1320,
-          width: '100vw',
-          minHeight: '300px',
-          height: 'calc(100vh - 40px)',
-        }}
-      >
-        {({ close }) => {
-          return (
-            <SessionProfile
-              websiteId={websiteId}
-              sessionId={session}
-              onClose={() => handleClose(close)}
-            />
-          );
-        }}
-      </Dialog>
+    <Modal
+      placement="bottom"
+      offset="80px"
+      isOpen={!!session}
+      onOpenChange={handleOpenChange}
+      isDismissable
+      {...props}
+    >
+      <Column height="100%" maxWidth="1320px" style={{ margin: '0 auto' }}>
+        <Dialog variant="sheet">
+          <Column padding="6">
+            <SessionProfile websiteId={websiteId} sessionId={session} />
+          </Column>
+        </Dialog>
+      </Column>
     </Modal>
   );
 }

src/app/(main)/websites/[websiteId]/sessions/SessionProfile.tsx

@@ -1,32 +1,13 @@
-import {
-  TextField,
-  Row,
-  Column,
-  Tabs,
-  TabList,
-  Tab,
-  TabPanel,
-  Icon,
-  Button,
-} from '@umami/react-zen';
+import { TextField, Row, Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
 import { Avatar } from '@/components/common/Avatar';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { X } from '@/components/icons';
 import { useMessages, useWebsiteSessionQuery } from '@/components/hooks';
 import { SessionActivity } from './SessionActivity';
 import { SessionData } from './SessionData';
 import { SessionInfo } from './SessionInfo';
 import { SessionStats } from './SessionStats';
 
-export function SessionProfile({
-  websiteId,
-  sessionId,
-  onClose,
-}: {
-  websiteId: string;
-  sessionId: string;
-  onClose?: () => void;
-}) {
+export function SessionProfile({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
   const { data, isLoading, error } = useWebsiteSessionQuery(websiteId, sessionId);
   const { formatMessage, labels } = useMessages();
 
@@ -40,13 +21,6 @@ export function SessionProfile({
     >
       {data && (
         <Column gap>
-          <Row alignItems="center" justifyContent="flex-end">
-            <Button onPress={onClose} variant="quiet">
-              <Icon>
-                <X />
-              </Icon>
-            </Button>
-          </Row>
           <Column gap="6">
             <Row justifyContent="center" alignItems="center" gap="6">
               <Avatar seed={data?.id} size={128} />

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(170px, 1fr))" gap {...props}>
+    <Grid columns="repeat(auto-fit, minmax(140px, 1fr))" gap {...props}>
       {children}
     </Grid>
   );