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>