Card mode for tables.

src/components/common/DataGrid.tsx

@@ -1,5 +1,12 @@
-import { ReactNode, useState, useCallback } from 'react';
-import { SearchField, Row, Column } from '@umami/react-zen';
+import {
+  ReactNode,
+  useState,
+  useCallback,
+  ReactElement,
+  cloneElement,
+  isValidElement,
+} from 'react';
+import { SearchField, Row, Column, useBreakpoint } from '@umami/react-zen';
 import { UseQueryResult } from '@tanstack/react-query';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { Pager } from '@/components/common/Pager';
@@ -35,6 +42,8 @@ export function DataGrid({
   const { router, updateParams, query: queryParams } = useNavigation();
   const [search, setSearch] = useState(queryParams?.search || data?.search || '');
   const showPager = allowPaging && data && data.count > data.pageSize;
+  const breakpoint = useBreakpoint();
+  const displayMode = ['xs', 'sm', 'md', 'lg'].includes(breakpoint) ? 'cards' : undefined;
 
   const handleSearch = (value: string) => {
     if (value !== search) {
@@ -50,6 +59,8 @@ export function DataGrid({
     [search],
   );
 
+  const child = data ? (typeof children === 'function' ? children(data) : children) : null;
+
   return (
     <Column gap="4" minHeight="300px">
       {allowSearch && (
@@ -73,7 +84,11 @@ export function DataGrid({
       >
         {data && (
           <>
-            <Column>{typeof children === 'function' ? children(data) : children}</Column>
+            <Column>
+              {isValidElement(child)
+                ? cloneElement(child as ReactElement<any>, { displayMode })
+                : child}
+            </Column>
             {showPager && (
               <Row marginTop="6">
                 <Pager

src/components/common/PageBody.tsx

@@ -31,9 +31,9 @@ export function PageBody({
     <Column
       {...props}
       width="100%"
-      paddingBottom="9"
+      paddingBottom="6"
       maxWidth={maxWidth}
-      paddingX="4"
+      paddingX={{ xs: '3', md: '6' }}
       style={{ margin: '0 auto' }}
     >
       {children}

src/components/input/NavButton.tsx

@@ -61,6 +61,7 @@ export function NavButton({ showText = true }: TeamsButtonProps) {
           borderRadius
           shadow="1"
           maxHeight="40px"
+          role="button"
           style={{ cursor: 'pointer', textWrap: 'nowrap', outline: 'none' }}
         >
           <Row alignItems="center" position="relative" gap maxHeight="40px">