[Snackbar] Spans the entire screen width

[MieleVL]

When rendering a Snackbar with anchorOrigin { vertical: 'bottom', horizontal: 'left' }, it spans the entire screen width. This is not visible, but can overlap other elements (eg: buttons that, because of this, are no longer clickable). See screenshot below.

• [x ] The issue is present in the latest release.
• [x ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Looking at the CSS of the component, MuiSnackbar-root defines a definition right: 8px, which should be unset when anchoring the Snackbar left.

Expected Behavior 🤔

The component should not span the entire width of the screen.

Steps to Reproduce 🕹

Steps:

1. Create a Snackbar with anchorOrigin { vertical: 'bottom', horizontal: 'left' }
2. Set the autoHideDuration high enough to examine the element
3. Use DevTools to examine how the element spans in the browser

Screenshot:
https://storage.puls.be/screen-mui-snackbar.png

Context 🔦

Your Environment 🌎

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

System:
OS: Windows 10 10.0.19042
Browser: Chrome 89.0.4389.114 (Officiële build) (64-bits)
Binaries:
Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 89.0.4389.114
Edge: Spartan (44.19041.906.0), Chromium (89.0.774.75)
npmPackages:
@emotion/react: ^11.1.5 => 11.1.5
@emotion/styled: ^11.3.0 => 11.3.0
@material-ui/core: next => 5.0.0-alpha.28
@material-ui/icons: ^4.11.2 => 4.11.2
@material-ui/lab: next => 5.0.0-alpha.28
@material-ui/pickers: ^3.3.10 => 3.3.10
@material-ui/styled-engine: 5.0.0-alpha.25
@material-ui/styles: 5.0.0-alpha.28
@material-ui/system: 5.0.0-alpha.28
@material-ui/types: 5.1.7
@material-ui/unstyled: 5.0.0-alpha.28
@material-ui/utils: 5.0.0-alpha.28
@types/react: 17.0.3
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
typescript: ^4.2.4 => 4.2.4

[mnajdova]

I can repro. This is the fix I would propose. It would improve the styles we have currently and it would solve the issue.

diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index b71e6d535c..f164cb15cf 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -50,14 +50,6 @@ const SnackbarRoot = experimentalStyled(
     overridesResolver,
   },
 )(({ theme, styleProps }) => {
-  const top1 = { top: 8 };
-  const bottom1 = { bottom: 8 };
-  const right = { justifyContent: 'flex-end' };
-  const left = { justifyContent: 'flex-start' };
-  const top3 = { top: 24 };
-  const bottom3 = { bottom: 24 };
-  const right3 = { right: 24 };
-  const left3 = { left: 24 };
   const center = {
     left: '50%',
     right: 'auto',
@@ -68,18 +60,16 @@ const SnackbarRoot = experimentalStyled(
     zIndex: theme.zIndex.snackbar,
     position: 'fixed',
     display: 'flex',
-    left: 8,
-    right: 8,
     justifyContent: 'center',
     alignItems: 'center',
-    ...(styleProps.anchorOrigin.vertical === 'top' ? top1 : bottom1),
-    ...(styleProps.anchorOrigin.horizontal === 'left' && left),
-    ...(styleProps.anchorOrigin.horizontal === 'right' && right),
+    ...(styleProps.anchorOrigin.vertical === 'top' ? { top: 8 } : { bottom: 8 }),
+    ...(styleProps.anchorOrigin.horizontal === 'left' && { justifyContent: 'flex-start', left: 8 }),
+    ...(styleProps.anchorOrigin.horizontal === 'right' && { justifyContent: 'flex-end', right: 8 }),
     [theme.breakpoints.up('sm')]: {
-      ...(styleProps.anchorOrigin.vertical === 'top' ? top3 : bottom3),
+      ...(styleProps.anchorOrigin.vertical === 'top' ? { top: 24 } : { bottom: 24 }),
       ...(styleProps.anchorOrigin.horizontal === 'center' && center),
-      ...(styleProps.anchorOrigin.horizontal === 'left' && left3),
-      ...(styleProps.anchorOrigin.horizontal === 'right' && right3),
+      ...(styleProps.anchorOrigin.horizontal === 'left' && { left: 24 }),
+      ...(styleProps.anchorOrigin.horizontal === 'right' && { right: 24 }),
     },
   };
 });

@MieleVL would you be interested in creating a PR? :)

[MieleVL]

@mnajdova sure!

[oliviertassinari]

This looks like another of #21821

[oliviertassinari]

Actually, it's ​a regression from #25142

[sophiac15]

I'm having a very similar same issue when rendering a Snackbar with anchorOrigin { vertical: 'bottom', horizontal: 'left' }, it spans the width and height of my Snackbar, right below the Snackbar overlaying my BottomBar. It is not visible but prevents me from clicking on the buttons underneath the anchorOrigin overlay. How can I set the anchorOrigin to be anchored exactly to where my Snackbar is showing (above the BottomBar). Please let me know if there are better places to post this! Thanks!