From c5086be6eb3ee68bc569f56157c3cdea75ae31f1 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Wed, 14 May 2025 15:29:03 -0700
Subject: [PATCH] Updated column widths.

---
 package.json                                         |  1 +
 src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx  |  6 ++----
 .../websites/[websiteId]/events/EventsTable.tsx      | 12 ++++++------
 .../websites/[websiteId]/sessions/SessionsTable.tsx  |  6 +++---
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 65f16687..21c78d47 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "type": "git",
     "url": "https://github.com/umami-software/umami.git"
   },
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "dev-turbo": "next dev -p 3001 --turbopack",
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx b/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
index b6cb7849..1d8eacaf 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx
@@ -88,15 +88,13 @@ export function WebsiteTabs({ websiteId }: { websiteId: string }) {
     },
   ];
 
-  const selected = links
-    ? links.find(({ path }) => path && pathname.endsWith(path))?.id
-    : 'overview';
+  const selected = links.find(({ path }) => path && pathname.endsWith(path))?.id || 'overview';
 
   return (
     <Column gap="2" position="absolute" padding="4" style={{ top: 0, left: 0, bottom: 0 }}>
       {links.map(({ id, label, icon, path }) => {
         return (
-          <Link key={id} href={renderTeamUrl(`/websites/${websiteId}/${path}`)}>
+          <Link key={id} href={renderTeamUrl(`/websites/${websiteId}${path}`)}>
             <Row
               alignItems="center"
               padding
diff --git a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
index 8428ff60..bfefc4c3 100644
--- a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
@@ -1,4 +1,4 @@
-import { DataTable, DataColumn, Icon } from '@umami/react-zen';
+import { DataTable, DataColumn, Icon, Row } from '@umami/react-zen';
 import { useMessages, useNavigation, useTimezone } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { Avatar } from '@/components/common/Avatar';
@@ -16,25 +16,25 @@ export function EventsTable({ data = [] }) {
 
   return (
     <DataTable data={data}>
-      <DataColumn id="session" label={formatMessage(labels.session)}>
+      <DataColumn id="session" label={formatMessage(labels.session)} width="100px">
         {(row: any) => (
           <Link href={renderTeamUrl(`/websites/${row.websiteId}/sessions/${row.sessionId}`)}>
             <Avatar seed={row.sessionId} size={64} />
           </Link>
         )}
       </DataColumn>
-      <DataColumn id="event" label={formatMessage(labels.event)}>
+      <DataColumn id="event" label={formatMessage(labels.event)} width="2fr">
         {(row: any) => {
           return (
-            <>
+            <Row alignItems="center" gap="2">
               <Icon>{row.eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon>
               {formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
               <strong>{row.eventName || row.urlPath}</strong>
-            </>
+            </Row>
           );
         }}
       </DataColumn>
-      <DataColumn id="created" label={formatMessage(labels.created)}>
+      <DataColumn id="created" label={formatMessage(labels.created)} width="1fr">
         {(row: any) => formatTimezoneDate(row.createdAt, 'PPPpp')}
       </DataColumn>
     </DataTable>
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
index 4db25fbc..3af17074 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
@@ -12,15 +12,15 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
 
   return (
     <DataTable data={data}>
-      <DataColumn id="id" label={formatMessage(labels.session)}>
+      <DataColumn id="id" label={formatMessage(labels.session)} width="100px">
         {(row: any) => (
           <Link href={`sessions/${row.id}`} className={styles.link}>
             <Avatar key={row.id} seed={row.id} size={64} />
           </Link>
         )}
       </DataColumn>
-      <DataColumn id="visits" label={formatMessage(labels.visits)} />
-      <DataColumn id="views" label={formatMessage(labels.views)} />
+      <DataColumn id="visits" label={formatMessage(labels.visits)} width="80px" />
+      <DataColumn id="views" label={formatMessage(labels.views)} width="80px" />
       <DataColumn id="country" label={formatMessage(labels.country)}>
         {(row: any) => (
           <TypeIcon type="country" value={row.country}>