@wlloyalty/wll-react-sdk 1.0.77 → 1.0.79

package/dist/web.js

@@ -20566,9 +20566,11 @@ var Grid = function (_a) {
         aspectRatio: 1
       };
     } 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,
@@ -20604,7 +20606,10 @@ 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
+          ]
         }, /*#__PURE__*/React.createElement(TileContainer, {
           tiles: currentTiles
         })));
@@ -20624,7 +20629,8 @@ var styles$2 = StyleSheet$1.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    width: '100%'
+    width: '100%',
+    justifyContent: 'space-between' // Ensure tiles are evenly spaced
   }
 });
 
@@ -21986,15 +21992,16 @@ var styles = StyleSheet$1.create({
   container: {
     flexDirection: 'column',
     flex: 1,
-    aspectRatio: 1
+    aspectRatio: 1,
+    width: '100%' // Ensure the container takes full width
   },
   tileContainer: {
     flex: 1,
-    aspectRatio: 1
+    aspectRatio: 1,
+    width: '100%' // Ensure each tile takes full width of its container
   },
   halfTileContainer: {
-    flex: 0.5,
-    aspectRatio: 1
+    flex: 0.5
   }
 });