Scrollable content area.

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} />

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>

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>

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>
   );
 }

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() {