Responsive updates.

src/app/(main)/links/[linkId]/LinkPanels.tsx

@@ -55,7 +55,7 @@ export function LinkPanels({ linkId }: { linkId: string }) {
         </Panel>
       </GridRow>
       <GridRow layout="two" {...rowProps}>
-        <Panel noPadding>
+        <Panel padding="0">
           <WorldMap websiteId={linkId} />
         </Panel>
         <Panel>

src/app/(main)/pixels/[pixelId]/PixelPanels.tsx

@@ -55,7 +55,7 @@ export function PixelPanels({ pixelId }: { pixelId: string }) {
         </Panel>
       </GridRow>
       <GridRow layout="two" {...rowProps}>
-        <Panel noPadding>
+        <Panel padding="0">
           <WorldMap websiteId={pixelId} />
         </Panel>
         <Panel>

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

@@ -1,4 +1,4 @@
-import { Column, Row } from '@umami/react-zen';
+import { Column, Row, Grid } from '@umami/react-zen';
 import { WebsiteFilterButton } from '@/components/input/WebsiteFilterButton';
 import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
 import { FilterBar } from '@/components/input/FilterBar';
@@ -22,12 +22,18 @@ export function WebsiteControls({
 }) {
   return (
     <Column gap>
-      <Row alignItems="center" justifyContent="space-between" gap="3">
-        {allowFilter ? <WebsiteFilterButton websiteId={websiteId} /> : <div />}
-        {allowDateFilter && <WebsiteDateFilter websiteId={websiteId} allowCompare={allowCompare} />}
-        {allowDownload && <ExportButton websiteId={websiteId} />}
-        {allowMonthFilter && <MonthFilter />}
-      </Row>
+      <Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap>
+        <Row alignItems="center" justifyContent="flex-end">
+          {allowFilter ? <WebsiteFilterButton websiteId={websiteId} /> : <div />}
+        </Row>
+        <Row alignItems="center" justifyContent="flex-end">
+          {allowDateFilter && (
+            <WebsiteDateFilter websiteId={websiteId} allowCompare={allowCompare} />
+          )}
+          {allowDownload && <ExportButton websiteId={websiteId} />}
+          {allowMonthFilter && <MonthFilter />}
+        </Row>
+      </Grid>
       {allowFilter && <FilterBar websiteId={websiteId} />}
     </Column>
   );

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

@@ -22,7 +22,11 @@ export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
         <ActiveUsers websiteId={website.id} />
 
         {showActions && (
-          <Row alignItems="center" gap>
+          <Row
+            display={{ xs: 'none', sm: 'none', md: 'none', lg: 'flex', xl: 'flex' }}
+            alignItems="center"
+            gap
+          >
             <ShareButton websiteId={website.id} shareId={website.shareId} />
             <LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
               <Icon>

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

@@ -2,24 +2,23 @@
 import { ReactNode } from 'react';
 import { Column, Grid } from '@umami/react-zen';
 import { WebsiteProvider } from '@/app/(main)/websites/WebsiteProvider';
-import { useNavigation } from '@/components/hooks';
 import { PageBody } from '@/components/common/PageBody';
 import { WebsiteHeader } from './WebsiteHeader';
 import { WebsiteNav } from './WebsiteNav';
 
 export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
-  const { pathname } = useNavigation();
-
-  const isSettings = pathname.endsWith('/settings');
-
   return (
     <WebsiteProvider websiteId={websiteId}>
-      <Grid columns={isSettings ? '1fr' : 'auto 1fr'} width="100%" height="100%">
-        {!isSettings && (
-          <Column height="100%" border="right" backgroundColor marginRight="2">
-            <WebsiteNav websiteId={websiteId} />
-          </Column>
-        )}
+      <Grid columns={{ xs: '1fr', lg: 'auto 1fr' }} width="100%" height="100%">
+        <Column
+          display={{ xs: 'none', lg: 'flex' }}
+          height="100%"
+          border="right"
+          backgroundColor
+          marginRight="2"
+        >
+          <WebsiteNav websiteId={websiteId} />
+        </Column>
         <PageBody gap>
           <WebsiteHeader showActions />
           <Column>{children}</Column>

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="span 2" noPadding>
+        <Panel gridColumn={{ xs: 'span 1', md: 'span 2' }} padding="0">
           <WorldMap websiteId={websiteId} />
         </Panel>
 
@@ -130,7 +130,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
               filterLink={false}
             />
           </Panel>
-          <Panel gridColumn="span 2">
+          <Panel gridColumn={{ xs: 'span 1', md: 'span 2' }}>
             <EventsChart websiteId={websiteId} />
           </Panel>
         </GridRow>

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

@@ -44,7 +44,7 @@ export function RealtimePage({ websiteId }: { websiteId: string }) {
         <Panel>
           <RealtimeCountries data={countries} />
         </Panel>
-        <Panel gridColumn="span 2" noPadding>
+        <Panel gridColumn="span 2" padding="0">
           <WorldMap data={countries} />
         </Panel>
       </GridRow>