From 5536e0b7e706e932ad5d46138d3c0b04428a273b Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Thu, 13 Mar 2025 19:49:04 -0700
Subject: [PATCH] Scrollable content area.

---
 package.json                                  |  4 +--
 pnpm-lock.yaml                                | 23 ++++++-------
 src/app/(main)/App.tsx                        |  2 +-
 src/app/(main)/dashboard/DashboardPage.tsx    |  7 ++--
 .../(main)/settings/teams/TeamLeaveButton.tsx |  5 ++-
 src/components/charts/BarChartTooltip.tsx     | 32 ++++++++-----------
 src/lib/redis.ts                              |  3 +-
 7 files changed, 33 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index cfe45369..6643d13b 100644
--- a/package.json
+++ b/package.json
@@ -76,9 +76,9 @@
     "@prisma/extension-read-replicas": "^0.4.0",
     "@react-spring/web": "^9.7.5",
     "@tanstack/react-query": "^5.66.11",
-    "@umami/prisma-client": "^0.14.0",
+    "@umami/prisma-client": "^0.16.0",
     "@umami/react-zen": "^0.63.0",
-    "@umami/redis-client": "^0.26.0",
+    "@umami/redis-client": "^0.27.0",
     "bcryptjs": "^2.4.3",
     "chalk": "^4.1.2",
     "chart.js": "^4.4.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1c05b369..d06933b5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,14 +45,14 @@ importers:
         specifier: ^5.66.11
         version: 5.67.1(react@19.0.0)
       '@umami/prisma-client':
-        specifier: ^0.14.0
-        version: 0.14.0(@prisma/client@6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2))(@prisma/extension-read-replicas@0.4.0(@prisma/client@6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2)))
+        specifier: ^0.16.0
+        version: 0.16.0(@prisma/client@6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2))(@prisma/extension-read-replicas@0.4.0(@prisma/client@6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2)))
       '@umami/react-zen':
         specifier: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen
         version: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen
       '@umami/redis-client':
-        specifier: ^0.26.0
-        version: 0.26.0
+        specifier: ^0.27.0
+        version: 0.27.0
       bcryptjs:
         specifier: ^2.4.3
         version: 2.4.3
@@ -176,9 +176,6 @@ importers:
       react-window:
         specifier: ^1.8.11
         version: 1.8.11(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      react-zen:
-        specifier: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen
-        version: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen
       request-ip:
         specifier: ^3.3.0
         version: 3.3.0
@@ -2934,14 +2931,14 @@ packages:
     resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
-  '@umami/prisma-client@0.14.0':
-    resolution: {integrity: sha512-62aAE5s5m/M1T88JIvOyZk2LzQIJ/iEeF57ewd/qKKNZdgXfP1aib+IAQ74db85vq6TwFyHMaXBeXztNNby5Fw==}
+  '@umami/prisma-client@0.16.0':
+    resolution: {integrity: sha512-TerqGrOva5JOyiDGSWWJAqfSFgs6KhPsTC/as0P4B9miwOEvDwT2lzAFYQDDYF8JIXNuzBWBxGY9si9EB5yXqw==}
     peerDependencies:
       '@prisma/client': ^4.8.0
       '@prisma/extension-read-replicas': ^0.3.0
 
-  '@umami/redis-client@0.26.0':
-    resolution: {integrity: sha512-j2vxb1gYF5zfk7BkrHgau2MwKsB5ijbQh2w1WoIvbP41cqTMsFm/zUrjhZ0cP1ZxR/riQR1AWxKmqNggYRZ5eA==}
+  '@umami/redis-client@0.27.0':
+    resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==}
 
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
@@ -10495,7 +10492,7 @@ snapshots:
       '@typescript-eslint/types': 6.21.0
       eslint-visitor-keys: 3.4.3
 
-  '@umami/prisma-client@0.14.0(@prisma/client@6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2))(@prisma/extension-read-replicas@0.4.0(@prisma/client@6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2)))':
+  '@umami/prisma-client@0.16.0(@prisma/client@6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2))(@prisma/extension-read-replicas@0.4.0(@prisma/client@6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2)))':
     dependencies:
       '@prisma/client': 6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2)
       '@prisma/extension-read-replicas': 0.4.0(@prisma/client@6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2))
@@ -10504,7 +10501,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@umami/redis-client@0.26.0':
+  '@umami/redis-client@0.27.0':
     dependencies:
       debug: 4.4.0(supports-color@8.1.1)
       redis: 4.7.0
diff --git a/src/app/(main)/App.tsx b/src/app/(main)/App.tsx
index 58ccb849..c522455f 100644
--- a/src/app/(main)/App.tsx
+++ b/src/app/(main)/App.tsx
@@ -32,7 +32,7 @@ export function App({ children }) {
   return (
     <Grid height="100vh" width="100%" columns="auto 1fr">
       <Nav />
-      <Grid rows="auto 1fr">
+      <Grid rows="auto 1fr" overflow="auto">
         <NavBar />
         <Page>
           <UpdateNotice user={user} config={config} />
diff --git a/src/app/(main)/dashboard/DashboardPage.tsx b/src/app/(main)/dashboard/DashboardPage.tsx
index 8944e857..f97e4d37 100644
--- a/src/app/(main)/dashboard/DashboardPage.tsx
+++ b/src/app/(main)/dashboard/DashboardPage.tsx
@@ -6,7 +6,7 @@ import { WebsiteChartList } from '../websites/[websiteId]/WebsiteChartList';
 import { DashboardSettingsButton } from '@/app/(main)/dashboard/DashboardSettingsButton';
 import { DashboardEdit } from '@/app/(main)/dashboard/DashboardEdit';
 import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
-import { useMessages, useLocale, useTeamUrl, useWebsites } from '@/components/hooks';
+import { useMessages, useTeamUrl, useWebsites } from '@/components/hooks';
 import { useDashboard } from '@/store/dashboard';
 import { LinkButton } from '@/components/common/LinkButton';
 
@@ -14,7 +14,6 @@ export function DashboardPage() {
   const { formatMessage, labels, messages } = useMessages();
   const { teamId, renderTeamUrl } = useTeamUrl();
   const { showCharts, editing, isEdited } = useDashboard();
-  const { dir } = useLocale();
   const pageSize = isEdited ? 200 : 10;
 
   const { result, query, params, setParams } = useWebsites({ teamId }, { pageSize });
@@ -37,8 +36,8 @@ export function DashboardPage() {
       {!hasData && (
         <EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}>
           <LinkButton href={renderTeamUrl('/settings')}>
-            <Icon rotate={dir === 'rtl' ? 180 : 0}>
-              <Icons.ArrowRight />
+            <Icon>
+              <Icons.Arrow />
             </Icon>
             <Text>{formatMessage(messages.goToSettings)}</Text>
           </LinkButton>
diff --git a/src/app/(main)/settings/teams/TeamLeaveButton.tsx b/src/app/(main)/settings/teams/TeamLeaveButton.tsx
index 1a6e217f..ca4f0944 100644
--- a/src/app/(main)/settings/teams/TeamLeaveButton.tsx
+++ b/src/app/(main)/settings/teams/TeamLeaveButton.tsx
@@ -1,4 +1,4 @@
-import { useLocale, useLogin, useMessages, useModified } from '@/components/hooks';
+import { useLogin, useMessages, useModified } from '@/components/hooks';
 import { useRouter } from 'next/navigation';
 import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
 import { TeamLeaveForm } from './TeamLeaveForm';
@@ -6,7 +6,6 @@ import { TeamLeaveForm } from './TeamLeaveForm';
 export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName: string }) {
   const { formatMessage, labels } = useMessages();
   const router = useRouter();
-  const { dir } = useLocale();
   const { user } = useLogin();
   const { touch } = useModified();
 
@@ -18,7 +17,7 @@ export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName
   return (
     <DialogTrigger>
       <Button variant="secondary">
-        <Icon rotate={dir === 'rtl' ? 180 : 0}>
+        <Icon>
           <Icons.Logout />
         </Icon>
         <Text>{formatMessage(labels.leave)}</Text>
diff --git a/src/components/charts/BarChartTooltip.tsx b/src/components/charts/BarChartTooltip.tsx
index 9919fab5..7235d464 100644
--- a/src/components/charts/BarChartTooltip.tsx
+++ b/src/components/charts/BarChartTooltip.tsx
@@ -1,7 +1,7 @@
 import { useLocale } from '@/components/hooks';
 import { formatDate } from '@/lib/date';
 import { formatLongCurrency, formatLongNumber } from '@/lib/format';
-import { Column, Row, StatusLight, FloatingTooltip, TooltipBubble } from '@umami/react-zen';
+import { Column, Row, StatusLight, FloatingTooltip } from '@umami/react-zen';
 
 const formats = {
   millisecond: 'T',
@@ -21,24 +21,18 @@ export function BarChartTooltip({ tooltip, unit, currency }) {
 
   return (
     <FloatingTooltip>
-      <TooltipBubble>
-        <Column gap="3" fontSize="1">
-          <Row alignItems="center">
-            {formatDate(
-              new Date(dataPoints[0].raw.d || dataPoints[0].raw.x),
-              formats[unit],
-              locale,
-            )}
-          </Row>
-          <Row alignItems="center">
-            <StatusLight color={labelColors?.[0]?.backgroundColor}>
-              {currency
-                ? formatLongCurrency(dataPoints[0].raw.y, currency)
-                : `${formatLongNumber(dataPoints[0].raw.y)} ${dataPoints[0].dataset.label}`}
-            </StatusLight>
-          </Row>
-        </Column>
-      </TooltipBubble>
+      <Column gap="3" fontSize="1">
+        <Row alignItems="center">
+          {formatDate(new Date(dataPoints[0].raw.d || dataPoints[0].raw.x), formats[unit], locale)}
+        </Row>
+        <Row alignItems="center">
+          <StatusLight color={labelColors?.[0]?.backgroundColor}>
+            {currency
+              ? formatLongCurrency(dataPoints[0].raw.y, currency)
+              : `${formatLongNumber(dataPoints[0].raw.y)} ${dataPoints[0].dataset.label}`}
+          </StatusLight>
+        </Row>
+      </Column>
     </FloatingTooltip>
   );
 }
diff --git a/src/lib/redis.ts b/src/lib/redis.ts
index 868b408a..f09aa916 100644
--- a/src/lib/redis.ts
+++ b/src/lib/redis.ts
@@ -1,5 +1,6 @@
-import { REDIS, UmamiRedisClient } from '@umami/redis-client';
+import { UmamiRedisClient } from '@umami/redis-client';
 
+const REDIS = 'redis';
 const enabled = !!process.env.REDIS_URL;
 
 function getClient() {