Fix width of the NotificationToast on narrow viewports (#1607)

* Fix toast width on mobile * Add changeset
sumup-oss · Jun 10, 2022 · 46fa52e · 46fa52e · vercel · Jun 10, 2022
1 parent 5ddd7a8
commit 46fa52e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/.changeset/thick-starfishes-flash.md b/.changeset/thick-starfishes-flash.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed the width of the `NotificationToast` component on narrow viewports.
diff --git a/packages/circuit-ui/components/ToastContext/ToastContext.tsx b/packages/circuit-ui/components/ToastContext/ToastContext.tsx
@@ -55,12 +55,20 @@ export interface ToastProviderProps {
 
 const listWrapperStyles = ({ theme }: StyleProps) => css`
   position: fixed;
+  width: 100%;
+  padding: 0 ${theme.spacings.giga};
   bottom: ${theme.spacings.giga};
-  left: 50%;
-  transform: translateX(-50%);
+  left: 0;
   display: flex;
   flex-direction: column-reverse;
   z-index: ${theme.zIndex.toast};
+
+  ${theme.mq.kilo} {
+    width: auto;
+    padding: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 `;
 
 const ListWrapper = styled('ul')(listWrapperStyles);