Merge pull request #13 from yoanbernabeu/improve-mobile

feat: enhance mobile layout responsiveness and configuration

Author: yoanbernabeu

.gitignore

@@ -13,6 +13,7 @@ dist-ssr
 *.local
 supabase/.temp/
 .supabase-config.json
+.temp/
 
 # Editor directories and files
 .vscode/*

.prettierignore

@@ -5,3 +5,4 @@ public
 package-lock.json
 
 
+

components/Builder.tsx

@@ -18,6 +18,7 @@ import {
   GRID_VERSION,
 } from '../services/storageService';
 import { getSocialPlatformOption, buildSocialUrl, formatFollowerCount } from '../socialPlatforms';
+import { getMobileLayout, MOBILE_GRID_CONFIG } from '../utils/mobileLayout';
 import {
   Download,
   Layout,
@@ -1671,27 +1672,26 @@ const Builder: React.FC<BuilderProps> = ({ onBack }) => {
                               </div>
                             )}
                         </div>
-                        {/* Grid Section - Matches export's mobile layout: single column, stacked blocks */}
+                        {/* Grid Section - Mobile layout: 2 columns adaptive */}
                         <div className="p-4 relative z-10">
                           <div
-                            className="grid gap-5 pb-8"
+                            className="grid pb-8"
                             style={{
-                              gridTemplateColumns: '1fr',
-                              gridAutoRows: '64px',
-                              gridAutoFlow: 'dense',
+                              gridTemplateColumns: `repeat(${MOBILE_GRID_CONFIG.columns}, 1fr)`,
+                              gridAutoRows: `${MOBILE_GRID_CONFIG.rowHeight}px`,
+                              gap: `${MOBILE_GRID_CONFIG.gap}px`,
                             }}
                           >
                             {sortedMobileBlocks.map((block) => {
-                              // In mobile export, blocks stack vertically in a single column
-                              // grid-column: auto, grid-row: auto (CSS resets positioning)
-                              // Row span is preserved
+                              // Calculate mobile layout based on desktop dimensions
+                              const mobileLayout = getMobileLayout(block);
                               return (
                                 <div
                                   key={block.id}
                                   className="pointer-events-none"
                                   style={{
-                                    gridColumn: 'auto',
-                                    gridRow: 'auto',
+                                    gridColumn: `span ${mobileLayout.colSpan}`,
+                                    gridRow: `span ${mobileLayout.rowSpan}`,
                                   }}
                                 >
                                   <Block

components/PreviewPage.tsx

@@ -3,6 +3,7 @@ import type { AvatarStyle, SavedBento } from '../types';
 import { getBento, getOrCreateActiveBento, setActiveBentoId } from '../services/storageService';
 import Block from './Block';
 import { buildSocialUrl, formatFollowerCount, getSocialPlatformOption } from '../socialPlatforms';
+import { getMobileLayout, MOBILE_GRID_CONFIG } from '../utils/mobileLayout';
 
 const PreviewPage: React.FC = () => {
   const [bento, setBento] = useState<SavedBento | null>(null);
@@ -233,33 +234,46 @@ const PreviewPage: React.FC = () => {
             )}
           </div>
 
-          {/* Single Column Grid */}
+          {/* Mobile Grid - 2 columns adaptive */}
           <div className="p-4">
             <div
-              className="grid gap-5 pb-8"
-              style={{ gridTemplateColumns: '1fr', gridAutoRows: '64px' }}
+              className="grid pb-8"
+              style={{
+                gridTemplateColumns: `repeat(${MOBILE_GRID_CONFIG.columns}, 1fr)`,
+                gridAutoRows: `${MOBILE_GRID_CONFIG.rowHeight}px`,
+                gap: `${MOBILE_GRID_CONFIG.gap}px`,
+              }}
             >
-              {sortedBlocks.map((block) => (
-                <div key={block.id} style={{ gridRow: `span ${block.rowSpan}` }}>
-                  <Block
-                    block={{ ...block, gridColumn: undefined, gridRow: undefined }}
-                    isSelected={false}
-                    isDragTarget={false}
-                    isDragging={false}
-                    enableResize={false}
-                    isResizing={false}
-                    onResizeStart={undefined}
-                    onEdit={() => {}}
-                    onDelete={() => {}}
-                    onDragStart={() => {}}
-                    onDragEnter={() => {}}
-                    onDragEnd={() => {}}
-                    onDrop={() => {}}
-                    enableTiltEffect={true}
-                    previewMode={true}
-                  />
-                </div>
-              ))}
+              {sortedBlocks.map((block) => {
+                const mobileLayout = getMobileLayout(block);
+                return (
+                  <div
+                    key={block.id}
+                    style={{
+                      gridColumn: `span ${mobileLayout.colSpan}`,
+                      gridRow: `span ${mobileLayout.rowSpan}`,
+                    }}
+                  >
+                    <Block
+                      block={{ ...block, gridColumn: undefined, gridRow: undefined }}
+                      isSelected={false}
+                      isDragTarget={false}
+                      isDragging={false}
+                      enableResize={false}
+                      isResizing={false}
+                      onResizeStart={undefined}
+                      onEdit={() => {}}
+                      onDelete={() => {}}
+                      onDragStart={() => {}}
+                      onDragEnter={() => {}}
+                      onDragEnd={() => {}}
+                      onDrop={() => {}}
+                      enableTiltEffect={true}
+                      previewMode={true}
+                    />
+                  </div>
+                );
+              })}
             </div>
           </div>
         </div>

services/export/templates/app/index.ts

@@ -12,6 +12,7 @@ import { generateBlockComponent } from './blockComponent';
 import {
   generateDesktopLayout,
   generateMobileLayout,
+  generateMobileLayoutHelper,
   generateFooter,
   generateBackgroundBlur,
 } from './layouts';
@@ -81,7 +82,7 @@ ${generateBlockComponent()}
 const profile = ${profileJson}
 const blocks: BlockData[] = ${blocksJson}
 ${generateAnalyticsHook(analyticsId)}
-
+${generateMobileLayoutHelper()}
 // Sort blocks for mobile
 const sortedBlocks = [...blocks].sort((a, b) => {
   const aRow = a.gridRow ?? 999

services/export/templates/app/layouts.ts

@@ -50,8 +50,23 @@ export const generateDesktopLayout = (params: LayoutParams): string => `
           </div>
         </div>`;
 
+// Mobile grid configuration constants
+export const MOBILE_GRID_CONFIG = {
+  columns: 2,
+  rowHeight: 80,
+  gap: 12,
+} as const;
+
+export const generateMobileLayoutHelper = (): string => `
+// Mobile layout helper - calculates responsive grid spans
+const getMobileLayout = (block: BlockData) => ({
+  colSpan: block.colSpan >= 5 ? 2 : 1,
+  rowSpan: block.colSpan >= 3 && block.colSpan < 5 ? Math.max(block.rowSpan, 2) : block.rowSpan
+})
+`;
+
 export const generateMobileLayout = (params: LayoutParams): string => `
-        {/* Mobile Layout */}
+        {/* Mobile Layout - 2 columns adaptive */}
         <div className="lg:hidden">
           <div className="p-4 pt-8 flex flex-col items-center text-center">
             <div className="w-24 h-24 mb-4 overflow-hidden bg-gray-100" style={avatarStyle}>
@@ -80,12 +95,15 @@ export const generateMobileLayout = (params: LayoutParams): string => `
             }
           </div>
           <div className="p-4">
-            <div className="grid gap-5" style={{ gridTemplateColumns: '1fr', gridAutoRows: '64px' }}>
-              {sortedBlocks.map(block => (
-                <div key={block.id} style={{ gridRow: \`span \${block.rowSpan}\` }}>
-                  <Block block={{ ...block, gridColumn: undefined, gridRow: undefined }} />
-                </div>
-              ))}
+            <div className="grid" style={{ gridTemplateColumns: 'repeat(${MOBILE_GRID_CONFIG.columns}, 1fr)', gridAutoRows: '${MOBILE_GRID_CONFIG.rowHeight}px', gap: '${MOBILE_GRID_CONFIG.gap}px' }}>
+              {sortedBlocks.map(block => {
+                const mobile = getMobileLayout(block)
+                return (
+                  <div key={block.id} style={{ gridColumn: \`span \${mobile.colSpan}\`, gridRow: \`span \${mobile.rowSpan}\` }}>
+                    <Block block={{ ...block, gridColumn: undefined, gridRow: undefined }} />
+                  </div>
+                )
+              })}
             </div>
           </div>
         </div>`;

utils/mobileLayout.ts

@@ -0,0 +1,33 @@
+// Mobile layout utilities for responsive grid conversion
+import { BlockData } from '../types';
+
+/**
+ * Calculates the mobile grid layout for a block based on its desktop dimensions.
+ *
+ * Rules:
+ * - Desktop colSpan 1-4 → Mobile 1 column (50% width)
+ * - Desktop colSpan 5-9 → Mobile 2 columns (100% width)
+ * - Medium blocks (colSpan 3-4) get minimum 2 rowSpan for better proportions
+ */
+export const getMobileLayout = (block: BlockData): { colSpan: number; rowSpan: number } => {
+  // Large blocks (more than half of 9-col grid) → full width
+  const mobileColSpan = block.colSpan >= 5 ? 2 : 1;
+
+  // Medium blocks that become narrow need more height
+  const mobileRowSpan =
+    block.colSpan >= 3 && block.colSpan < 5 ? Math.max(block.rowSpan, 2) : block.rowSpan;
+
+  return {
+    colSpan: mobileColSpan,
+    rowSpan: mobileRowSpan,
+  };
+};
+
+/**
+ * Mobile grid configuration constants
+ */
+export const MOBILE_GRID_CONFIG = {
+  columns: 2,
+  rowHeight: 80, // px per row
+  gap: 12, // px between items
+} as const;