Merge pull request #163 from objectstack-ai/copilot/fix-mobile-display-components

Author: hotlong

.gitignore

@@ -48,3 +48,6 @@ docs/.vitepress/cache
 apps/site/.next
 apps/site/.map.ts
 apps/site/.source
+
+# Test artifacts
+test-screenshots

packages/components/src/renderers/basic/button-group.tsx

@@ -22,7 +22,7 @@ ComponentRegistry.register('button-group',
 
     return (
       <div 
-        className={cn('inline-flex rounded-md shadow-sm', schema.className)} 
+        className={cn('flex flex-wrap sm:inline-flex rounded-md shadow-sm', schema.className)} 
         role="group"
         {...buttonGroupProps}
         {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}

packages/components/src/renderers/basic/div.tsx

@@ -43,7 +43,7 @@ ComponentRegistry.register('div',
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],
     defaultProps: {
-      className: 'p-4 border border-dashed border-gray-300 rounded min-h-[100px]'
+      className: 'p-2 sm:p-4 border border-dashed border-gray-300 rounded min-h-[100px]'
     }
   }
 );

packages/components/src/renderers/basic/image.tsx

@@ -40,6 +40,9 @@ ComponentRegistry.register('image',
       { name: 'src', type: 'string', label: 'Source URL' },
       { name: 'alt', type: 'string', label: 'Alt Text' },
       { name: 'className', type: 'string', label: 'Classes' }
-    ]
+    ],
+    defaultProps: {
+      className: 'max-w-full h-auto'
+    }
   }
 );

packages/components/src/renderers/basic/navigation-menu.tsx

@@ -33,7 +33,7 @@ ComponentRegistry.register('navigation-menu',
                 <>
                   <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>
                   <NavigationMenuContent>
-                    <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+                    <ul className="grid w-full gap-3 p-4 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]">
                       {item.children.map((child, childIdx) => (
                         <li key={childIdx}>
                           <NavigationMenuLink asChild>

packages/components/src/renderers/basic/separator.tsx

@@ -50,7 +50,7 @@ ComponentRegistry.register('separator',
     ],
     defaultProps: {
       orientation: 'horizontal',
-      className: 'my-4'
+      className: 'my-2 sm:my-4'
     }
   }
 );

packages/components/src/renderers/basic/span.tsx

@@ -43,7 +43,7 @@ ComponentRegistry.register('span',
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],
     defaultProps: {
-      className: 'px-2 py-1'
+      className: 'px-1.5 py-0.5 sm:px-2 sm:py-1'
     },
     defaultChildren: [
       { type: 'text', content: 'Inline text' }

packages/components/src/renderers/complex/carousel.tsx

@@ -58,9 +58,9 @@ ComponentRegistry.register('carousel',
       orientation: 'horizontal',
       showArrows: true,
       items: [
-        [{ type: 'div', className: 'p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 1' }] }],
-        [{ type: 'div', className: 'p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 2' }] }],
-        [{ type: 'div', className: 'p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 3' }] }]
+        [{ type: 'div', className: 'p-4 sm:p-6 md:p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 1' }] }],
+        [{ type: 'div', className: 'p-4 sm:p-6 md:p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 2' }] }],
+        [{ type: 'div', className: 'p-4 sm:p-6 md:p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 3' }] }]
       ],
       className: 'w-full max-w-xs'
     }

packages/components/src/renderers/data-display/kbd.tsx

@@ -22,7 +22,7 @@ ComponentRegistry.register('kbd',
     const keys = Array.isArray(schema.keys) ? schema.keys : [schema.keys || schema.label || 'K'];
 
     return (
-      <div className={cn('inline-flex gap-1', schema.className)}>
+      <div className={cn('inline-flex flex-wrap gap-1', schema.className)}>
         {keys.map((key, idx) => (
           <kbd
             key={idx}

packages/components/src/renderers/data-display/statistic.tsx

@@ -14,7 +14,7 @@ import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
 const StatisticRenderer = ({ schema }: { schema: StatisticSchema }) => {
   return (
     <div className={cn(
-        "group relative flex flex-col p-6 rounded-xl border bg-card text-card-foreground shadow-sm",
+        "group relative flex flex-col p-4 sm:p-5 md:p-6 rounded-xl border bg-card text-card-foreground shadow-sm",
         schema.className
     )}>
       {/* Label */}