@graphcommerce/next-ui 3.21.8 → 3.21.9

package/AnimatedRow/index.tsx

@@ -10,7 +10,7 @@ export default function AnimatedRow(props: AnimatedRowProps) {
   return (
     <m.div
       {...props}
-      layout='size'
+      layout
       initial={{ opacity: 0, height: 0 }}
       animate={{ opacity: 1, height: 'auto' }}
       exit={{ opacity: 0, height: 0 }}

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.21.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.8...@graphcommerce/next-ui@3.21.9) (2021-12-21)
+
+
+### Bug Fixes
+
+* layout overlay sometimes have a horizontal scrollbar ([a1cfe72](https://github.com/ho-nl/m2-pwa/commit/a1cfe72d207dcdf07948080b605b64e7f73939bf))
+* make sure the bottomsheet has enough space on android ([02d3e63](https://github.com/ho-nl/m2-pwa/commit/02d3e639388446423149461ae52d0ed12a962f5e))
+
+
+
+
+
 ## [3.21.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.7...@graphcommerce/next-ui@3.21.8) (2021-12-21)
 
 

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -19,12 +19,6 @@ const useStyles = makeStyles(
       '@supports (-webkit-touch-callout: none)': {
         height: '-webkit-fill-available',
       },
-      [theme.breakpoints.down('sm')]: {
-        width: '100vw',
-      },
-      [theme.breakpoints.up('md')]: {
-        width: '100vw',
-      },
     },
     rootVariantSmLeft: {
       [theme.breakpoints.down('sm')]: {
@@ -118,7 +112,6 @@ const useStyles = makeStyles(
       pointerEvents: 'none',
       gridArea: 'overlay',
       scrollSnapAlign: 'start',
-      width: 'min-content',
       minHeight: '100vh',
       '@supports (-webkit-touch-callout: none)': {
         minHeight: '-webkit-fill-available',
@@ -144,17 +137,22 @@ const useStyles = makeStyles(
       boxShadow: theme.shadows[24],
       minWidth: 'min(800px, 90vw)',
       scrollSnapAlign: 'end',
+
+      // The top bar on Google Chrome is about 56 pixels high. If we do not provide this padding we'll run into the issue that the user can't scroll to the bottom.
+      // We can't change this value with JS as that causes much jank
+      [`@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) and (max-width:${theme.breakpoints.values.sm}px)`]:
+        {
+          paddingBottom: 56,
+        },
     },
     overlayPaneVariantSmBottom: {
       [theme.breakpoints.down('sm')]: {
-        width: '100vw',
         borderTopLeftRadius: theme.shape.borderRadius * 3,
         borderTopRightRadius: theme.shape.borderRadius * 3,
       },
     },
     overlayPaneVariantMdBottom: {
       [theme.breakpoints.up('md')]: {
-        width: '100vw',
         borderTopLeftRadius: theme.shape.borderRadius * 3,
         borderTopRightRadius: theme.shape.borderRadius * 3,
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.21.8",
+  "version": "3.21.9",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@graphcommerce/framer-next-pages": "^2.108.8",
-    "@graphcommerce/framer-scroller": "^1.1.18",
+    "@graphcommerce/framer-next-pages": "^2.108.9",
+    "@graphcommerce/framer-scroller": "^1.1.19",
     "@graphcommerce/framer-utils": "^2.103.20",
     "@graphcommerce/graphql": "^2.105.12",
     "@graphcommerce/image": "^2.105.11",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "5ad26fe58ae85c8d776e3f571e96832f24811d5d"
+  "gitHead": "fbca834579f81b45ee062e85146535eb6d7ab079"
 }