fix(grid): activate mobile card view at the 768px app breakpoint (#1822)

ObjectGrid already has a mobile card view (stacked cards instead of a
side-scrolling table), but it only kicked in below 480px — narrower than
the app's mobile breakpoint (768px, shared by useIsMobile / Tailwind md:
/ the responsive page + grid layout). The 480–768px band (most phones in
landscape, tablet-portrait, and even some phones whose reported
innerWidth sits just over 480) fell through to the wide table and had to
be side-scrolled to read columns past the third.

Raise the threshold to 768 so the card view covers the full mobile range,
matching every other responsive switch in the shell. Desktop (>=768)
is unchanged. Pairs with the iOS grouped-inset record detail (#1820):
list cards now tap straight into the stacked detail with no h-scroll
anywhere in the mobile flow.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

packages/plugin-grid/src/ObjectGrid.tsx

@@ -319,8 +319,10 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     enabled: !!dataSource && !!schema.objectName,
   });
 
+  // Activate the mobile card view below the 768px app mobile breakpoint so
+  // phones and tablet-portrait never need to side-scroll a wide grid.
   useEffect(() => {
-    const checkWidth = () => setUseCardView(window.innerWidth < 480);
+    const checkWidth = () => setUseCardView(window.innerWidth < 768);
     checkWidth();
     window.addEventListener('resize', checkWidth);
     return () => window.removeEventListener('resize', checkWidth);
@@ -1629,7 +1631,9 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
       ? `${schema.objectName.charAt(0).toUpperCase() + schema.objectName.slice(1)} Detail`
       : 'Record Detail';
 
-  // Mobile card-view fallback for screens below 480px
+  // Mobile card-view: below the 768px app breakpoint (matches useIsMobile /
+  // Tailwind md: / the responsive page+grid layout), render stacked cards
+  // instead of a side-scrolling wide table.
   if (useCardView && data.length > 0 && !isGrouped) {
     const displayColumns = generateColumns().filter((c: any) => c.accessorKey !== '_actions');