Add mobile responsiveness to all component categories

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

Author: Copilot

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 */}

packages/components/src/renderers/form/file-upload.tsx

@@ -95,7 +95,7 @@ ComponentRegistry.register('file-upload',
           <div 
             onClick={handleClick}
             className={cn(
-                "relative overflow-hidden cursor-pointer rounded-lg border-2 border-dashed transition-all duration-300 min-h-[120px] flex flex-col items-center justify-center p-6 gap-3",
+                "relative overflow-hidden cursor-pointer rounded-lg border-2 border-dashed transition-all duration-300 min-h-[120px] flex flex-col items-center justify-center p-4 sm:p-6 gap-3",
                 isUploading 
                     ? "border-cyan-400 bg-cyan-950/30" 
                     : "border-slate-700 bg-slate-900/50 hover:bg-slate-900 hover:border-cyan-500/50 hover:shadow-[0_0_20px_-5px_rgba(6,182,212,0.3)]"
@@ -141,7 +141,7 @@ ComponentRegistry.register('file-upload',
 
                   <div className="flex items-center gap-3 z-10">
                     <CheckCircle2 className="w-4 h-4 text-emerald-500 rounded-full" />
-                    <span className="truncate max-w-[200px] text-muted-foreground group-hover/file:text-foreground font-mono text-xs transition-colors">{file.name}</span>
+                    <span className="truncate max-w-[150px] sm:max-w-[200px] md:max-w-[300px] text-muted-foreground group-hover/file:text-foreground font-mono text-xs transition-colors">{file.name}</span>
                   </div>
 
                   <Button

packages/components/src/renderers/form/form.tsx

@@ -126,11 +126,12 @@ ComponentRegistry.register('form',
     };
 
     // Determine grid classes based on columns (explicit classes for Tailwind JIT)
+    // Mobile-first: 1 column on mobile, 2 on sm, then md/lg for larger values
     const gridColsClass = 
       columns === 1 ? '' :
-      columns === 2 ? 'md:grid-cols-2' :
-      columns === 3 ? 'md:grid-cols-3' :
-      'md:grid-cols-4';
+      columns === 2 ? 'sm:grid-cols-2' :
+      columns === 3 ? 'sm:grid-cols-2 md:grid-cols-3' :
+      'sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4';
 
     const gridClass = columns > 1 
       ? cn('grid gap-4', gridColsClass)

packages/components/src/renderers/layout/container.tsx

@@ -36,19 +36,19 @@ const ContainerRenderer = forwardRef<HTMLDivElement, { schema: ContainerSchema;
       maxWidth === 'screen' && 'max-w-screen-2xl',
       // Centering
       centered && 'mx-auto',
-      // Padding
+      // Padding - Mobile-first responsive
       padding === 0 && 'p-0',
-      padding === 1 && 'p-1',
-      padding === 2 && 'p-2',
-      padding === 3 && 'p-3',
-      padding === 4 && 'p-4',
-      padding === 5 && 'p-5',
-      padding === 6 && 'p-6',
-      padding === 7 && 'p-7',
-      padding === 8 && 'p-8',
-      padding === 10 && 'p-10',
-      padding === 12 && 'p-12',
-      padding === 16 && 'p-16',
+      padding === 1 && 'p-0.5 sm:p-1',
+      padding === 2 && 'p-1 sm:p-2',
+      padding === 3 && 'p-2 sm:p-3',
+      padding === 4 && 'p-2 sm:p-3 md:p-4',
+      padding === 5 && 'p-3 sm:p-4 md:p-5',
+      padding === 6 && 'p-3 sm:p-4 md:p-6',
+      padding === 7 && 'p-4 sm:p-5 md:p-7',
+      padding === 8 && 'p-4 sm:p-6 md:p-8',
+      padding === 10 && 'p-5 sm:p-7 md:p-10',
+      padding === 12 && 'p-6 sm:p-8 md:p-12',
+      padding === 16 && 'p-8 sm:p-10 md:p-16',
       className
     );
 

packages/components/src/renderers/layout/flex.tsx

@@ -39,16 +39,16 @@ ComponentRegistry.register('flex',
       align === 'center' && 'items-center',
       align === 'baseline' && 'items-baseline',
       align === 'stretch' && 'items-stretch',
-      // Gap
+      // Gap - Mobile-first responsive
       gap === 0 && 'gap-0',
       gap === 1 && 'gap-1',
-      gap === 2 && 'gap-2',
-      gap === 3 && 'gap-3',
-      gap === 4 && 'gap-4',
-      gap === 5 && 'gap-5',
-      gap === 6 && 'gap-6',
-      gap === 7 && 'gap-7',
-      gap === 8 && 'gap-8',
+      gap === 2 && 'gap-1.5 sm:gap-2',
+      gap === 3 && 'gap-2 sm:gap-3',
+      gap === 4 && 'gap-2 sm:gap-3 md:gap-4',
+      gap === 5 && 'gap-3 sm:gap-4 md:gap-5',
+      gap === 6 && 'gap-3 sm:gap-4 md:gap-6',
+      gap === 7 && 'gap-4 sm:gap-5 md:gap-7',
+      gap === 8 && 'gap-4 sm:gap-6 md:gap-8',
       // Wrap
       wrap && 'flex-wrap',
       className

packages/components/src/renderers/layout/page.tsx

@@ -31,7 +31,7 @@ export const PageRenderer: React.FC<{ schema: PageSchema; className?: string; [k
 
   return (
     <div 
-      className={cn("min-h-full w-full bg-background p-6 md:p-8", className)}
+      className={cn("min-h-full w-full bg-background p-4 md:p-6 lg:p-8", className)}
       {...pageProps}
       // Apply designer props
       data-obj-id={dataObjId}

packages/components/src/renderers/layout/stack.tsx

@@ -42,16 +42,16 @@ const StackRenderer = forwardRef<HTMLDivElement, { schema: StackSchema; classNam
       align === 'center' && 'items-center',
       align === 'baseline' && 'items-baseline',
       align === 'stretch' && 'items-stretch',
-      // Gap
+      // Gap - Mobile-first responsive
       gap === 0 && 'gap-0',
       gap === 1 && 'gap-1',
-      gap === 2 && 'gap-2',
-      gap === 3 && 'gap-3',
-      gap === 4 && 'gap-4',
-      gap === 5 && 'gap-5',
-      gap === 6 && 'gap-6',
-      gap === 8 && 'gap-8',
-      gap === 10 && 'gap-10',
+      gap === 2 && 'gap-1.5 sm:gap-2',
+      gap === 3 && 'gap-2 sm:gap-3',
+      gap === 4 && 'gap-2 sm:gap-3 md:gap-4',
+      gap === 5 && 'gap-3 sm:gap-4 md:gap-5',
+      gap === 6 && 'gap-3 sm:gap-4 md:gap-6',
+      gap === 8 && 'gap-4 sm:gap-6 md:gap-8',
+      gap === 10 && 'gap-5 sm:gap-7 md:gap-10',
       // Wrap
       wrap && 'flex-wrap',
       className

packages/components/src/renderers/navigation/header-bar.tsx

@@ -22,7 +22,7 @@ import {
 
 ComponentRegistry.register('header-bar', 
   ({ schema }: { schema: HeaderBarSchema }) => (
-    <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+    <header className="flex h-14 sm:h-16 shrink-0 items-center gap-2 border-b px-3 sm:px-4">
       <SidebarTrigger />
       <Separator orientation="vertical" className="mr-2 h-4" />
       <Breadcrumb>