Layout changes.

src/components/input/TeamsButton.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import type { Selection } from 'react-aria-components';
 import { useRouter } from 'next/navigation';
 import {
   Text,
@@ -31,7 +30,7 @@ export function TeamsButton({
   const { teamId } = useTeamUrl();
   const router = useRouter();
   const team = result?.data?.find(({ id }) => id === teamId);
-  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([teamId || user.id]));
+  const [selectedKeys, setSelectedKeys] = useState<any>(new Set([teamId || user.id]));
 
   const handleSelect = (keys: Set<string>) => {
     if (keys.size > 0) {
@@ -58,7 +57,7 @@ export function TeamsButton({
           </Icon>
         </Row>
       </Button>
-      <Popover placement="bottom end">
+      <Popover placement="bottom start">
         <Box minWidth={300}>
           <Menu
             selectionMode="single"

src/components/layout/Page.tsx

@@ -1,15 +1,13 @@
 'use client';
 import { ReactNode } from 'react';
-import classNames from 'classnames';
-import { AlertBanner, Loading } from '@umami/react-zen';
+import { AlertBanner, Loading, Column } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
-import styles from './Page.module.css';
 
 export function Page({
-  className,
   error,
   isLoading,
   children,
+  ...props
 }: {
   className?: string;
   error?: unknown;
@@ -26,5 +24,25 @@ export function Page({
     return <Loading position="page" />;
   }
 
-  return <div className={classNames(styles.page, className)}>{children}</div>;
+  return (
+    <Column
+      {...props}
+      gridColumn="2 / 3"
+      gridRow="2 / 3"
+      marginRight="6"
+      marginBottom="6"
+      width="100%"
+      maxWidth="1320px"
+      minHeight="600px"
+      margin="auto"
+      backgroundColor="1"
+      overflow="auto"
+      borderRadius="3"
+      borderSize="1"
+      paddingX="8"
+      paddingY="4"
+    >
+      {children}
+    </Column>
+  );
 }

src/components/metrics/MetricsTable.tsx

@@ -85,7 +85,15 @@ export function MetricsTable({
   }, [data, dataFilter, search, limit, formatValue, type]);
 
   return (
-    <div className={classNames(styles.container, className)}>
+    <div
+      className={classNames(styles.container, className)}
+      style={{
+        background: 'var(--background-color)',
+        border: '1px solid var(--border-color)',
+        borderRadius: 'var(--border-radius)',
+        padding: '10px',
+      }}
+    >
       {error && <ErrorMessage />}
       <div className={styles.actions}>
         {allowSearch && (