Small fixes.

src/app/(main)/MobileNav.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
 import { Logo } from '@/components/svg';
 import { NavButton } from '@/components/input/NavButton';
-import { MobileMenu } from '@/components/common/MobileMenu';
+import { MobileMenuButton } from '@/components/input/MobileMenuButton';
 
 export function MobileNav() {
   const { formatMessage, labels } = useMessages();
@@ -34,7 +34,7 @@ export function MobileNav() {
 
   return (
     <Grid columns="auto 1fr" flexGrow={1}>
-      <MobileMenu>
+      <MobileMenuButton>
         {({ close }) => {
           return (
             <>
@@ -54,7 +54,7 @@ export function MobileNav() {
             </>
           );
         }}
-      </MobileMenu>
+      </MobileMenuButton>
       <Row alignItems="center" justifyContent="center" flexGrow={1}>
         <IconLabel icon={<Logo />} style={{ width: 'auto' }}>
           <Text weight="bold">umami</Text>

src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx

@@ -2,7 +2,7 @@ import { Grid, Column, Row } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
 import { WebsiteExpandedMenu } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedMenu';
-import { MobileMenu } from '@/components/common/MobileMenu';
+import { MobileMenuButton } from '@/components/input/MobileMenuButton';
 
 export function WebsiteExpandedView({
   websiteId,
@@ -21,11 +21,11 @@ export function WebsiteExpandedView({
   return (
     <Column gap>
       <Row display={{ xs: 'flex', md: 'none' }}>
-        <MobileMenu>
+        <MobileMenuButton>
           {({ close }) => {
             return <WebsiteExpandedMenu excludedIds={excludedIds} onItemClick={close} />;
           }}
-        </MobileMenu>
+        </MobileMenuButton>
       </Row>
       <Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap="6" height="100%" overflow="hidden">
         <Column

src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx

@@ -1,4 +1,4 @@
-import { Button, Icon, Text, Row, DialogTrigger, Dialog, Modal } from '@umami/react-zen';
+import { Icon, Text, Row } from '@umami/react-zen';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Share, Edit } from '@/components/icons';
 import { Favicon } from '@/components/common/Favicon';
@@ -6,6 +6,7 @@ import { ActiveUsers } from '@/components/metrics/ActiveUsers';
 import { WebsiteShareForm } from '@/app/(main)/websites/[websiteId]/settings/WebsiteShareForm';
 import { useMessages, useNavigation, useWebsite } from '@/components/hooks';
 import { LinkButton } from '@/components/common/LinkButton';
+import { DialogButton } from '@/components/input/DialogButton';
 
 export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
   const website = useWebsite();
@@ -45,20 +46,10 @@ const ShareButton = ({ websiteId, shareId }) => {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <DialogTrigger>
+    <DialogButton icon={<Share />} label={formatMessage(labels.share)} width="800px">
-      <Button>
+      {({ close }) => {
-        <Icon>
+        return <WebsiteShareForm websiteId={websiteId} shareId={shareId} onClose={close} />;
-          <Share />
+      }}
-        </Icon>
+    </DialogButton>
-        <Text>Share</Text>
-      </Button>
-      <Modal>
-        <Dialog title={formatMessage(labels.share)} style={{ width: 800 }}>
-          {({ close }) => {
-            return <WebsiteShareForm websiteId={websiteId} shareId={shareId} onClose={close} />;
-          }}
-        </Dialog>
-      </Modal>
-    </DialogTrigger>
   );
 };

src/app/(main)/websites/[websiteId]/WebsiteNav.tsx

@@ -161,7 +161,7 @@ export function WebsiteNav({
     .find(({ path }) => path && pathname.endsWith(path.split('?')[0]))?.id;
 
   return (
-    <Column padding="3" gap>
+    <Column padding="3" position="sticky" top="0" gap>
       <WebsiteSelect
         websiteId={websiteId}
         teamId={teamId}

src/app/(main)/websites/[websiteId]/WebsitePanels.tsx

@@ -106,7 +106,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
       </GridRow>
 
       <GridRow layout="two-one" {...rowProps}>
-        <Panel gridColumn={{ xs: 'span 1', md: 'span 2' }} padding="0">
+        <Panel gridColumn={{ xs: 'span 1', md: 'span 2' }} paddingX="0" paddingY="0">
           <WorldMap websiteId={websiteId} />
         </Panel>
 

src/components/input/DialogButton.tsx

@@ -46,7 +46,6 @@ export function DialogButton({
       <Button {...props}>
         <IconLabel icon={icon} label={label} />
       </Button>
-
       <Modal placement={isMobile ? 'fullscreen' : 'center'}>
         <Dialog variant={isMobile ? 'sheet' : undefined} title={title || label} style={style}>
           {children}

src/components/input/MobileMenuButton.tsx

@@ -1,7 +1,7 @@
 import { Dialog, DialogTrigger, Button, Icon, Modal, DialogProps } from '@umami/react-zen';
 import { Menu } from '@/components/icons';
 
-export function MobileMenu(props: DialogProps) {
+export function MobileMenuButton(props: DialogProps) {
   return (
     <DialogTrigger>
       <Button>

src/components/metrics/WorldMap.tsx

@@ -65,7 +65,12 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) {
   };
 
   return (
-    <Column {...props} data-tip="" data-for="world-map-tooltip" style={{ margin: 'auto 0' }}>
+    <Column
+      {...props}
+      data-tip=""
+      data-for="world-map-tooltip"
+      style={{ margin: 'auto 0', overflow: 'hidden' }}
+    >
       <ComposableMap projection="geoMercator">
         <ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
           <Geographies geography={`${process.env.basePath || ''}${MAP_FILE}`}>