@wlloyalty/wll-react-sdk 1.0.78 → 1.0.79

package/dist/native.js

@@ -3656,9 +3656,11 @@ var Grid = function (_a) {
             };
         }
         else {
+            // For mobile, we need to be very precise with our calculations
             var horizontalPadding = GRID_GAP;
             var availableWidth = SCREEN_WIDTH - horizontalPadding * 2;
-            var tileWidth = (availableWidth - (columns - 1) * GRID_GAP) / columns;
+            var gapSpace = (columns - 1) * GRID_GAP;
+            var tileWidth = Math.floor((availableWidth - gapSpace) / columns);
             return {
                 width: tileWidth,
                 marginBottom: GRID_GAP,
@@ -3699,6 +3701,7 @@ var Grid = function (_a) {
                         // @ts-ignore Web uses CSS calc strings for responsive layouts, while ViewStyle expects numbers
                         getTileWidth(columnsPerRow),
                         !isLastInRow && { marginRight: GRID_GAP },
+                        { overflow: 'hidden' }, // Prevent content from overflowing
                     ], children: jsxRuntimeExports.jsx(TileContainer, { tiles: currentTiles }) }, "container-".concat(index)));
                 currentTiles = [];
             }
@@ -3712,6 +3715,7 @@ var styles$2 = reactNative.StyleSheet.create({
         flexDirection: 'row',
         flexWrap: 'wrap',
         width: '100%',
+        justifyContent: 'space-between', // Ensure tiles are evenly spaced
     },
 });
 
@@ -4658,10 +4662,12 @@ var styles = reactNative.StyleSheet.create({
         flexDirection: 'column',
         flex: 1,
         aspectRatio: 1,
+        width: '100%', // Ensure the container takes full width
     },
     tileContainer: {
         flex: 1,
         aspectRatio: 1,
+        width: '100%', // Ensure each tile takes full width of its container
     },
     halfTileContainer: {
         flex: 0.5,