fix overflow cart items not scrolling

yinkakun · Oct 24, 2022 · 29523fe · 29523fe · vercel · Oct 24, 2022
1 parent 00e71dd
commit 29523fe
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 26 deletions.
diff --git a/storefront/components/cart/cart-summary.tsx b/storefront/components/cart/cart-summary.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { Minus, Plus, Crosshair, X } from 'react-feather';
+import { Minus, Plus, X } from 'react-feather';
 import { useCart } from '@/context/cart-context';
 import { LineItem } from '@medusajs/medusa';
 import Image from 'next/image';
@@ -13,7 +13,10 @@ export const CartSummary = () => {
         <h3>Shopping Cart</h3>
       </div>
 
-      <div className="scrollbar-hide flex grow flex-col gap-4 overflow-y-auto">
+      <div
+        data-lenis-prevent
+        className="scrollbar-hide flex grow flex-col gap-4 overflow-y-scroll overscroll-contain"
+      >
         {cart?.items.map((item) => {
           return <CartItem key={item.id} item={item} />;
         })}
@@ -39,7 +42,7 @@ interface CartItemProps {
 }
 
 const CartItem = ({ item }: CartItemProps) => {
-  const { addItem, removeItem, updateItem } = useCart();
+  const { removeItem, updateItem } = useCart();
   const itemQuantity = item.quantity;
 
   const handleRemoveItem = () => {
@@ -65,7 +68,7 @@ const CartItem = ({ item }: CartItemProps) => {
   };
 
   return (
-    <div>
+    <div data-lenis-prevent>
       <div className="flex items-center justify-between gap-4 font-alt-sans text-white text-opacity-90">
         <div className="flex h-[80px] w-[80px] shrink-0 items-center justify-center border-white border-opacity-20 bg-white bg-opacity-10">
           <Image src={item.thumbnail || ''} width={20} height={50} />

diff --git a/storefront/package.json b/storefront/package.json
@@ -21,7 +21,7 @@
     "@headlessui/react": "1.7.3",
     "@medusajs/medusa": "1.5.0",
     "@medusajs/medusa-js": "1.3.1",
-    "@studio-freight/lenis": "0.2.13",
+    "@studio-freight/lenis": "0.2.17",
     "autoprefixer": "10.4.12",
     "framer-motion": "7.6.1",
     "next": "12.3.1",
@@ -33,7 +33,7 @@
     "react-hook-form": "7.38.0",
     "react-hot-toast": "2.4.0",
     "sharp": "0.31.1",
-    "tailwindcss": "3.1.8"
+    "tailwindcss": "3.2.1"
   },
   "devDependencies": {
     "@types/node": "16.11.65",

diff --git a/storefront/yarn.lock b/storefront/yarn.lock
@@ -732,10 +732,10 @@
   resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df"
   integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==
 
-"@studio-freight/[email protected].13":
-  version "0.2.13"
-  resolved "https://registry.yarnpkg.com/@studio-freight/lenis/-/lenis-0.2.13.tgz#e60d41b431fe0d349401de2b8d9f5471b8ad17df"
-  integrity sha512-o2vG0JD8Tfx44cx8BrmRsGREf/UxAdiyKGNfpnOyMoWEW/MX8UJ84ldq/lQ39PVCPzDkHw6yLIjCGEkVEhyluw==
+"@studio-freight/[email protected].17":
+  version "0.2.17"
+  resolved "https://registry.yarnpkg.com/@studio-freight/lenis/-/lenis-0.2.17.tgz#370518bcb572799f8972439f627ab0a9e525c806"
+  integrity sha512-LKaJQ3Nx0AygkoubjrF7umiGzsa4Em7YA+9ktnCcJJgKcQYEIxAzqGzq5YW4sSzpuiaElk7RQC8qBLIBMP3nQA==
   dependencies:
     tiny-emitter "^2.1.0"
     virtual-scroll "^2.2.1"
@@ -2506,7 +2506,7 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
-fast-glob@^3.2.11, fast-glob@^3.2.9:
+fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.9:
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
   integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
@@ -3782,7 +3782,7 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
-micromatch@^4.0.4:
+micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -4589,14 +4589,14 @@ postcss-load-config@^3.1.4:
     lilconfig "^2.0.5"
     yaml "^1.10.2"
 
-postcss-nested@5.0.6:
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
-  integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
+postcss-nested@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735"
+  integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
   dependencies:
-    postcss-selector-parser "^6.0.6"
+    postcss-selector-parser "^6.0.10"
 
-postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.6:
+postcss-selector-parser@^6.0.10:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
   integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
@@ -4618,7 +4618,7 @@ [email protected]:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-[email protected], postcss@^8.4.14:
+[email protected], postcss@^8.4.17:
   version "8.4.18"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2"
   integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
@@ -5496,29 +5496,30 @@ synckit@^0.8.3:
     "@pkgr/utils" "^2.3.1"
     tslib "^2.4.0"
 
-tailwindcss@3.1.8:
-  version "3.1.8"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.1.8.tgz#4f8520550d67a835d32f2f4021580f9fddb7b741"
-  integrity sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==
+tailwindcss@3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.1.tgz#1bd828fff3172489962357f8d531c184080a6786"
+  integrity sha512-Uw+GVSxp5CM48krnjHObqoOwlCt5Qo6nw1jlCRwfGy68dSYb/LwS9ZFidYGRiM+w6rMawkZiu1mEMAsHYAfoLg==
   dependencies:
     arg "^5.0.2"
     chokidar "^3.5.3"
     color-name "^1.1.4"
     detective "^5.2.1"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.2.11"
+    fast-glob "^3.2.12"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
     lilconfig "^2.0.6"
+    micromatch "^4.0.5"
     normalize-path "^3.0.0"
     object-hash "^3.0.0"
     picocolors "^1.0.0"
-    postcss "^8.4.14"
+    postcss "^8.4.17"
     postcss-import "^14.1.0"
     postcss-js "^4.0.0"
     postcss-load-config "^3.1.4"
-    postcss-nested "5.0.6"
+    postcss-nested "6.0.0"
     postcss-selector-parser "^6.0.10"
     postcss-value-parser "^4.2.0"
     quick-lru "^5.1.1"