From f1e1e7600cd18508d199f2e274c0854d28eb6d10 Mon Sep 17 00:00:00 2001
From: Hossein Dehnokhalaji <hossein.dehnavi98@yahoo.com>
Date: Tue, 18 May 2021 00:47:00 +0100
Subject: [PATCH] Fixes layout issues with centred snackbars on xs screen sizes
 (#382)

* Fixes #380 - Fixes issues with centered snackbars on xs screen sizes

* Update changelog

* 1.0.8
---
 CHANGELOG.md              |  6 ++++++
 package-lock.json         |  2 +-
 package.json              |  2 +-
 src/SnackbarContainer.tsx | 32 ++++++++++----------------------
 4 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1372e9fc..10650b86 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 Thanks to all contributers who improved notistack by opening an issue/PR.
 
+### `notistack@1.0.8`
+###### May 18, 2021
+* **@angeshpc91** Fixes issues with centered snackbars on xs screen sizes [#380](https://github.com/iamhosseindhv/notistack/issues/380) 
+
+<br />
+
 ### `notistack@1.0.7`
 ###### May 8, 2021
 * **@whytspace** Multiple Snackbars always left aligned [#373](https://github.com/iamhosseindhv/notistack/issues/373) 
diff --git a/package-lock.json b/package-lock.json
index 6ecef9fd..10aa9d9b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "notistack",
-    "version": "1.0.7",
+    "version": "1.0.8",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
diff --git a/package.json b/package.json
index 42dd80a7..a81d1e15 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "notistack",
-    "version": "1.0.7",
+    "version": "1.0.8",
     "description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
     "main": "dist/index.js",
     "module": "dist/notistack.esm.js",
diff --git a/src/SnackbarContainer.tsx b/src/SnackbarContainer.tsx
index 3e37a4b4..37e52cc8 100644
--- a/src/SnackbarContainer.tsx
+++ b/src/SnackbarContainer.tsx
@@ -9,6 +9,8 @@ const collapse = {
     wrapper: '& > .MuiCollapse-container > .MuiCollapse-wrapper',
 };
 
+const xsWidthMargin = 16;
+
 const useStyle = makeStyles((theme) => ({
     root: {
         boxSizing: 'border-box',
@@ -26,57 +28,48 @@ const useStyle = makeStyles((theme) => ({
         },
         [collapse.wrapper]: {
             padding: `${SNACKBAR_INDENTS.snackbar.default}px 0px`,
+            transition: 'padding 300ms ease 0ms',
         },
         maxWidth: `calc(100% - ${SNACKBAR_INDENTS.view.default * 2}px)`,
         [theme.breakpoints.down('xs')]: {
-            left: '16px',
-            right: '16px',
             width: '100%',
-            maxWidth: 'calc(100% - 32px)',
+            maxWidth: `calc(100% - ${xsWidthMargin * 2}px)`,
         },
     },
-
     rootDense: {
-        maxWidth: `calc(100% - ${SNACKBAR_INDENTS.view.dense * 2}px)`,
         [collapse.wrapper]: {
             padding: `${SNACKBAR_INDENTS.snackbar.dense}px 0px`,
         },
     },
-
     top: {
         top: SNACKBAR_INDENTS.view.default - SNACKBAR_INDENTS.snackbar.default,
         flexDirection: 'column',
     },
-    topDense: { top: SNACKBAR_INDENTS.view.dense - SNACKBAR_INDENTS.snackbar.dense },
-
     bottom: {
         bottom: SNACKBAR_INDENTS.view.default - SNACKBAR_INDENTS.snackbar.default,
         flexDirection: 'column-reverse',
     },
-    bottomDense: { bottom: SNACKBAR_INDENTS.view.dense - SNACKBAR_INDENTS.snackbar.dense },
-
     left: {
         left: SNACKBAR_INDENTS.view.default,
         [theme.breakpoints.up('sm')]: {
             alignItems: 'flex-start',
         },
+        [theme.breakpoints.down('xs')]: {
+            left: `${xsWidthMargin}px`,
+        },
     },
-    leftDense: { left: SNACKBAR_INDENTS.view.dense },
-
     right: {
         right: SNACKBAR_INDENTS.view.default,
         [theme.breakpoints.up('sm')]: {
             alignItems: 'flex-end',
         },
+        [theme.breakpoints.down('xs')]: {
+            right: `${xsWidthMargin}px`,
+        },
     },
-    rightDense: { right: SNACKBAR_INDENTS.view.dense },
-
     center: {
         left: '50%',
         transform: 'translateX(-50%)',
-        [theme.breakpoints.down('xs')]: {
-            transform: 'translateX(0)',
-        },
         [theme.breakpoints.up('sm')]: {
             alignItems: 'center',
         },
@@ -98,11 +91,6 @@ const SnackbarContainer: React.FC<SnackbarContainerProps> = (props) => {
     const combinedClassname = clsx(
         classes[anchorOrigin.vertical],
         classes[anchorOrigin.horizontal],
-        // @ts-ignore
-        { [classes[`${anchorOrigin.vertical}Dense`]]: dense },
-        // @ts-ignore
-        { [classes[`${anchorOrigin.horizontal}Dense`]]: dense },
-        // @ts-ignore
         { [classes.rootDense]: dense },
         classes.root, // root should come after others to override maxWidth
         className,