From a7e202a566f097a186af09bc530cc8160dc06486 Mon Sep 17 00:00:00 2001
From: Mikhail Korolev <mikhail.korolev@toptal.com>
Date: Wed, 29 Nov 2023 15:28:29 +0100
Subject: [PATCH] [FX-4530] Fix Notification banner on smaller screens (#4029)

* [FX-4530] Fix Notification banner on smaller screens

* Add changeset
---
 .changeset/smooth-pillows-notice.md         |  8 ++++++++
 packages/picasso/src/Notification/styles.ts | 18 +++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/smooth-pillows-notice.md

diff --git a/.changeset/smooth-pillows-notice.md b/.changeset/smooth-pillows-notice.md
new file mode 100644
index 0000000000..b095c20a9f
--- /dev/null
+++ b/.changeset/smooth-pillows-notice.md
@@ -0,0 +1,8 @@
+---
+"@toptal/picasso": patch
+---
+
+### Notification
+
+- fix banner-type `Notification` padding for responbsible screen sizes
+  
diff --git a/packages/picasso/src/Notification/styles.ts b/packages/picasso/src/Notification/styles.ts
index 24055a4882..77f19e6a96 100644
--- a/packages/picasso/src/Notification/styles.ts
+++ b/packages/picasso/src/Notification/styles.ts
@@ -1,9 +1,12 @@
 import type { Theme } from '@material-ui/core/styles'
 import { createStyles } from '@material-ui/core/styles'
-import { PicassoProvider } from '@toptal/picasso-provider'
+import {
+  breakpointsList as breakpoints,
+  PicassoProvider,
+} from '@toptal/picasso-provider'
 import { rem } from '@toptal/picasso-shared'
 
-PicassoProvider.override(({ layout }: Theme) => ({
+PicassoProvider.override(({ layout, breakpoints: { down } }: Theme) => ({
   MuiSnackbarContent: {
     message: {
       display: 'flex',
@@ -12,7 +15,9 @@ PicassoProvider.override(({ layout }: Theme) => ({
       width: '100%',
       minWidth: 0,
       margin: '0 auto',
-
+      [down(breakpoints.xl)]: {
+        maxWidth: 'unset',
+      },
       '& > div': {
         width: '100%',
       },
@@ -23,6 +28,7 @@ PicassoProvider.override(({ layout }: Theme) => ({
 export default ({
   palette: { red, green, yellow, common, text },
   shadows,
+  breakpoints: { down },
   sizes: { borderRadius },
 }: Theme) =>
   createStyles({
@@ -55,6 +61,12 @@ export default ({
     notificationYellow: {
       background: yellow.lighter,
       padding: `1.5em ${rem('130px')}`,
+      [down(breakpoints.lg)]: {
+        padding: '1.5em',
+      },
+      [down(breakpoints.sm)]: {
+        padding: '1.5em 1em',
+      },
     },
 
     // Content