Add DialogTrigger to overflow menus

src/app/(main)/websites/[websiteId]/(reports)/breakdown/BreakdownPage.tsx

@@ -1,23 +1,27 @@
 'use client';
-import { useState } from 'react';
-import { Button, Column, Box, DialogTrigger, Popover, Dialog, IconLabel } from '@umami/react-zen';
-import { useDateRange, useMessages } from '@/components/hooks';
-import { ListCheck } from '@/components/icons';
-import { Panel } from '@/components/common/Panel';
-import { Breakdown } from './Breakdown';
-import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
 import { FieldSelectForm } from '@/app/(main)/websites/[websiteId]/(reports)/breakdown/FieldSelectForm';
+import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
+import { Panel } from '@/components/common/Panel';
+import { useDateRange, useMessages, useMobile } from '@/components/hooks';
+import { ListCheck } from '@/components/icons';
+import { DialogButton } from '@/components/input/DialogButton';
+import { Column, Row } from '@umami/react-zen';
+import { useState } from 'react';
+import { Breakdown } from './Breakdown';
 
 export function BreakdownPage({ websiteId }: { websiteId: string }) {
   const {
     dateRange: { startDate, endDate },
   } = useDateRange();
   const [fields, setFields] = useState(['path']);
+  const { isMobile } = useMobile();
 
   return (
     <Column gap>
       <WebsiteControls websiteId={websiteId} />
+      <Row alignItems="center" justifyContent={isMobile ? 'flex-end' : 'flex-start'}>
         <FieldsButton value={fields} onChange={setFields} />
+      </Row>
       <Panel height="900px" overflow="auto" allowFullscreen>
         <Breakdown
           websiteId={websiteId}
@@ -34,19 +38,15 @@ const FieldsButton = ({ value, onChange }) => {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Box>
+    <DialogButton
-      <DialogTrigger>
+      icon={<ListCheck />}
-        <Button>
+      label={formatMessage(labels.fields)}
-          <IconLabel icon={<ListCheck />}>{formatMessage(labels.fields)}</IconLabel>
+      width="800px"
-        </Button>
+      minHeight="300px"
-        <Popover>
+    >
-          <Dialog title={formatMessage(labels.fields)} style={{ width: 400 }}>
+      {({ close }) => {
-            {({ close }) => (
+        return <FieldSelectForm selectedFields={value} onChange={onChange} onClose={close} />;
-              <FieldSelectForm selectedFields={value} onChange={onChange} onClose={close} />
+      }}
-            )}
+    </DialogButton>
-          </Dialog>
-        </Popover>
-      </DialogTrigger>
-    </Box>
   );
 };

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

@@ -12,7 +12,7 @@ export function CohortAddButton({ websiteId }: { websiteId: string }) {
       label={formatMessage(labels.cohort)}
       variant="primary"
       width="800px"
-      minHeight="300px"
+      height="calc(100dvh - 40px)"
     >
       {({ close }) => {
         return <CohortEditForm websiteId={websiteId} onClose={close} />;

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

@@ -21,7 +21,7 @@ export function CohortEditButton({
       variant="quiet"
       title={formatMessage(labels.cohort)}
       width="800px"
-      minHeight="300px"
+      height="calc(100dvh - 40px)"
     >
       {({ close }) => {
         return (

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

@@ -12,6 +12,7 @@ export function SegmentAddButton({ websiteId }: { websiteId: string }) {
       label={formatMessage(labels.segment)}
       variant="primary"
       width="800px"
+      height="calc(100dvh - 40px)"
     >
       {({ close }) => {
         return <SegmentEditForm websiteId={websiteId} onClose={close} />;

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

@@ -21,6 +21,7 @@ export function SegmentEditButton({
       title={formatMessage(labels.segment)}
       variant="quiet"
       width="800px"
+      height="calc(100dvh - 40px)"
     >
       {({ close }) => {
         return (