Fix mobile responsiveness for basic components

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

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' }