Added DialogButton to handle mobile.

src/components/common/DataGrid.tsx

@@ -64,7 +64,7 @@ export function DataGrid({
   return (
     <Column gap="4" minHeight="300px">
       {allowSearch && (
-        <Row alignItems="center" justifyContent="space-between">
+        <Row alignItems="center" justifyContent="space-between" wrap="wrap" gap>
           <SearchField
             value={search}
             onSearch={handleSearch}

src/components/common/FilterRecord.tsx

@@ -104,8 +104,8 @@ export function FilterRecord({
             </Select>
           )}
         </Grid>
-        <Column justifyContent="flex-end">
-          <Button variant="quiet" onPress={() => onRemove?.(name)}>
+        <Column justifyContent="flex-start">
+          <Button onPress={() => onRemove?.(name)}>
             <Icon>
               <X />
             </Icon>

src/components/common/MobileMenu.tsx

@@ -9,7 +9,7 @@ export function MobileMenu(props: DialogProps) {
           <Menu />
         </Icon>
       </Button>
-      <Modal position="left" offset="80px">
+      <Modal placement="left" offset="80px">
         <Dialog variant="sheet" {...props} />
       </Modal>
     </DialogTrigger>

src/components/hooks/index.ts

@@ -73,6 +73,7 @@ export * from './useGlobalState';
 export * from './useLanguageNames';
 export * from './useLocale';
 export * from './useMessages';
+export * from './useMobile';
 export * from './useModified';
 export * from './useNavigation';
 export * from './usePagedQuery';

src/components/hooks/useMobile.ts

@@ -0,0 +1,8 @@
+import { useBreakpoint } from '@umami/react-zen';
+
+export function useMobile() {
+  const breakpoint = useBreakpoint();
+  const isMobile = ['xs', 'sm', 'md'].includes(breakpoint);
+
+  return { breakpoint, isMobile };
+}

src/components/input/ActionButton.tsx

@@ -1,25 +0,0 @@
-import { ReactNode } from 'react';
-import { Button, Icon, Modal, Text, DialogTrigger } from '@umami/react-zen';
-
-export function ActionButton({
-  onClick,
-  icon,
-  title,
-  children,
-}: {
-  onClick?: () => void;
-  icon?: ReactNode;
-  title?: string;
-  children?: ReactNode;
-}) {
-  return (
-    <DialogTrigger>
-      <Text title={title}>
-        <Button variant="quiet" onPress={onClick}>
-          <Icon>{icon}</Icon>
-        </Button>
-      </Text>
-      <Modal>{children}</Modal>
-    </DialogTrigger>
-  );
-}

src/components/input/DialogButton.tsx

@@ -0,0 +1,57 @@
+import { CSSProperties, ReactNode } from 'react';
+import {
+  Button,
+  ButtonProps,
+  Modal,
+  Dialog,
+  DialogTrigger,
+  DialogProps,
+  IconLabel,
+} from '@umami/react-zen';
+import { useMobile } from '@/components/hooks';
+
+export interface DialogButtonProps extends Omit<ButtonProps, 'children'> {
+  icon?: ReactNode;
+  label?: ReactNode;
+  title?: ReactNode;
+  width?: string;
+  height?: string;
+  minWidth?: string;
+  minHeight?: string;
+  children?: DialogProps['children'];
+}
+
+export function DialogButton({
+  icon,
+  label,
+  title,
+  width = '800px',
+  height,
+  minWidth,
+  minHeight,
+  children,
+  ...props
+}: DialogButtonProps) {
+  const { isMobile } = useMobile();
+  const style: CSSProperties = { width, height, minWidth, minHeight, padding: '32px' };
+
+  if (isMobile) {
+    style.width = '100%';
+    style.height = '100%';
+    style.overflowY = 'auto';
+  }
+
+  return (
+    <DialogTrigger>
+      <Button {...props}>
+        <IconLabel icon={icon} label={label} />
+      </Button>
+
+      <Modal placement={isMobile ? 'fullscreen' : 'center'}>
+        <Dialog variant={isMobile ? 'sheet' : undefined} title={title || label} style={style}>
+          {children}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}

src/components/input/FieldFilters.tsx

@@ -13,7 +13,7 @@ import {
   MenuItem,
   Icon,
 } from '@umami/react-zen';
-import { useFields, useMessages } from '@/components/hooks';
+import { useFields, useMessages, useMobile } from '@/components/hooks';
 import { Plus } from '@/components/icons';
 import { FilterRecord } from '@/components/common/FilterRecord';
 import { Empty } from '@/components/common/Empty';
@@ -30,6 +30,7 @@ export function FieldFilters({ websiteId, value, exclude = [], onChange }: Field
   const { fields } = useFields();
   const startDate = subMonths(endOfDay(new Date()), 6);
   const endDate = endOfDay(new Date());
+  const { isMobile } = useMobile();
 
   const updateFilter = (name: string, props: Record<string, any>) => {
     onChange(value.map(filter => (filter.name === name ? { ...filter, ...props } : filter)));
@@ -60,8 +61,11 @@ export function FieldFilters({ websiteId, value, exclude = [], onChange }: Field
               <Plus />
             </Icon>
           </Button>
-          <Popover placement="bottom start">
-            <Menu onAction={handleAdd}>
+          <Popover placement={isMobile ? 'left' : 'bottom start'} shouldFlip>
+            <Menu
+              onAction={handleAdd}
+              style={{ maxHeight: 'calc(100vh - 2rem)', overflowY: 'auto' }}
+            >
               {fields
                 .filter(({ name }) => !exclude.includes(name))
                 .map(field => {

src/components/input/WebsiteFilterButton.tsx

@@ -34,7 +34,7 @@ export function WebsiteFilterButton({
         </Icon>
         {showText && <Text>{formatMessage(labels.filter)}</Text>}
       </Button>
-      <Modal position={isMobile ? 'fullscreen' : 'center'}>
+      <Modal placement={isMobile ? 'fullscreen' : 'center'}>
         <Dialog title={formatMessage(labels.filters)}>
           {({ close }) => {
             return <FilterEditForm websiteId={websiteId} onChange={handleChange} onClose={close} />;