Fixes protolib grid on small screen

Protofy-xyz · Jan 14, 2025 · 9198a19 · 9198a19
1 parent 3206a0f
commit 9198a19
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/packages/protolib/src/components/EditableObject/index.tsx b/packages/protolib/src/components/EditableObject/index.tsx
@@ -92,8 +92,8 @@ export const FormGroup = ({ ele, title, children, icon, simple = false, path })
     </FormElement>
 }
 
-export const GridElement = ({ index, data, width }) => {
-    const numColumns = data.ele._def.size || 1
+export const GridElement = ({ index, data, width, columns }) => {
+    const numColumns = data.ele._def.size <= columns ? data.ele._def.size : 1
 
     return <XStack f={1} width={(width * numColumns) + (numColumns === 1 ? data.columnMargin / 2 : ((numColumns - 1) * data.columnMargin))} key={data.x}>{getElement({
         ele: data.ele,

diff --git a/packages/protolib/src/components/Grid.tsx b/packages/protolib/src/components/Grid.tsx
@@ -134,7 +134,7 @@ export const Grid = React.forwardRef(({overScanBy=5,masonry=true, containerRef,
     return <XStack flexWrap='wrap'>
       {
         data.map((ele, i) => {
-          return <Stack key={i} m={spacing/2}> { React.createElement(card, {index: ele.index, data: {...ele}, width: itemMinWidth}) } </Stack>
+          return <Stack key={i} m={spacing/2}> { React.createElement(card, {index: ele.index, data: {...ele}, width: itemMinWidth, columns}) } </Stack>
         })
       }
     </XStack>
@@ -181,4 +181,4 @@ export const Grid = React.forwardRef(({overScanBy=5,masonry=true, containerRef,
       })}
     </XStack>
   )
-})
+})