From 557c4adfa60c302d2291b41bff40eb3bbd25338f Mon Sep 17 00:00:00 2001
From: Ruchi Kushwaha <rk07ruchi@gmail.com>
Date: Mon, 27 Jul 2020 00:03:29 +0530
Subject: [PATCH] [docs] Fix custom Snackbar width on mobile (#21948)

---
 .../pages/components/snackbars/CustomizedSnackbars.js    | 9 ++++++++-
 .../pages/components/snackbars/CustomizedSnackbars.tsx   | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.js b/docs/src/pages/components/snackbars/CustomizedSnackbars.js
index b9bffc364a7443..ec4644b8c1fe78 100644
--- a/docs/src/pages/components/snackbars/CustomizedSnackbars.js
+++ b/docs/src/pages/components/snackbars/CustomizedSnackbars.js
@@ -15,6 +15,9 @@ const useStyles = makeStyles((theme) => ({
       marginTop: theme.spacing(2),
     },
   },
+  alert: {
+    width: '100%',
+  },
 }));
 
 export default function CustomizedSnackbars() {
@@ -39,7 +42,11 @@ export default function CustomizedSnackbars() {
         Open success snackbar
       </Button>
       <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
-        <Alert onClose={handleClose} severity="success">
+        <Alert
+          onClose={handleClose}
+          severity="success"
+          className={classes.alert}
+        >
           This is a success message!
         </Alert>
       </Snackbar>
diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx b/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx
index 20f0328dda7aae..9f539abd62cbff 100644
--- a/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx
+++ b/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx
@@ -15,6 +15,9 @@ const useStyles = makeStyles((theme: Theme) => ({
       marginTop: theme.spacing(2),
     },
   },
+  alert: {
+    width: '100%',
+  },
 }));
 
 export default function CustomizedSnackbars() {
@@ -39,7 +42,11 @@ export default function CustomizedSnackbars() {
         Open success snackbar
       </Button>
       <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
-        <Alert onClose={handleClose} severity="success">
+        <Alert
+          onClose={handleClose}
+          severity="success"
+          className={classes.alert}
+        >
           This is a success message!
         </Alert>
       </Snackbar>