@everymatrix/casino-filter-page 0.0.248 → 0.0.251

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-filter-page",
-  "version": "0.0.248",
+  "version": "0.0.251",
   "main": "dist/casino-filter-page.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "77f6efa473daab4dd62004b893c587558bf4511c"
+  "gitHead": "d39a0752d3212dfa393748d70c01eb211ac4c902"
 }

package/src/CasinoFilterPage.svelte

@@ -329,6 +329,17 @@
   :host {
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   }
+
+  .FilterModalContent {
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .FilterHeaderSection {
+    flex-grow: 0;
+  }
+
   .FilterHeaderDetails {
     .FilterHeaderTitle {
       font-size: 34px;
@@ -346,8 +357,25 @@
   .FilterContentSection {
     display: inline-flex;
     flex-wrap: wrap;
-    grid-gap: 30px;
+    grid-gap: 25px;
+    flex-grow: 1;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--emfe-w-color-gray-300, #58586B) var(--emfe-w-color-gray-100, #E6E6E6);
   }
+
+  .FilterContentSection::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .FilterContentSection::-webkit-scrollbar-thumb {
+    background: var(--emfe-w-color-gray-300, #58586B);
+  }
+
+  .FilterContentSection::-webkit-scrollbar-track {
+    background: var(--emfe-w-color-gray-100, #E6E6E6);
+  }
+
   .VendorBox {
     width: 230px;
     height: 125px;
@@ -391,6 +419,7 @@
     justify-content: center;
     grid-gap: 30px;
     margin-top: 60px;
+    flex-grow: 0;
     .ClearFiltersButton, .ApplyFiltersButton {
       width: 180px;
       height: 50px;
@@ -469,7 +498,10 @@
     .FilterFooterSection {
       margin: 30px auto 15px;
       grid-gap: 10px;
+      width: 100%;
       .ClearFiltersButton, .ApplyFiltersButton {
+        width: 100%;
+        max-width: 180px;
         font-size: 12px;
       }
     }