@everymatrix/casino-games-category-section 0.0.316 → 0.0.319

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-games-category-section",
-  "version": "0.0.316",
+  "version": "0.0.319",
   "main": "dist/casino-games-category-section.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f7fc15774d608e0711662d4e0df2b39e3c18e745"
+  "gitHead": "303df572e2a23ddc3a1c2f113be36d9db5606323"
 }

package/src/CasinoGamesCategorySection.svelte

@@ -395,7 +395,7 @@
         categoryData = res;
         // @TODO categoryData type fix
         /**
-         * This check is needed to prevent requests with less items 
+         * This check is needed to prevent requests with less items
          * that started before but ended after the last request to add items to list
          * This could also use abort controller instead but refactoring is needed
         */
@@ -730,6 +730,8 @@
 
   $grid-gap: 16px;
   $grid-cell-size: 192px;
+  $grid-cell-size-small: 110px;
+  $grid-cell-size-medium: 122px;
 
   .CategoryName,
   .StatusText {
@@ -859,6 +861,44 @@
       gap: $grid-gap + 12;
     }
   }
+
+  @media screen and (max-width: 385px) {
+  .CasinoGamesGrid {
+    display: grid;
+    gap: $grid-gap;
+    grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-small, 46%), 1fr));
+    grid-template-rows: repeat(auto-fill, $grid-cell-size-small);
+    grid-auto-rows: $grid-cell-size-small;
+    grid-auto-columns: $grid-cell-size-small;
+
+    &.GamesListIncreasedGap {
+      gap: $grid-gap;
+      }
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    .CasinoGamesGrid {
+      display: grid;
+      gap: $grid-gap;
+      grid-template-columns: repeat(auto-fill, minmax(Min($grid-cell-size-medium, 46%), 1fr));
+      grid-template-rows: repeat(auto-fill, $grid-cell-size-medium);
+      grid-auto-rows: $grid-cell-size-medium;
+      grid-auto-columns: $grid-cell-size-medium;
+
+      &.GamesListIncreasedGap {
+        gap: $grid-gap;
+      }
+    }
+  }
+
+  @media screen and (min-width: 1100px) {
+    .CasinoGamesGrid {
+      grid-template-rows: repeat(auto-fill, 142px);
+      grid-auto-rows: 142px;
+    }
+  }
+
   .SearchLoading {
     display: block;
     padding: 50px;