From 2ecd9d7b1391b8fc83e9c12a18bab105e7148f0f Mon Sep 17 00:00:00 2001
From: sct <ryan@sct.dev>
Date: Mon, 26 Apr 2021 01:29:36 +0900
Subject: [PATCH] fix(ui): correct toasts being in the wrong position on
 smaller screens

---
 src/components/Toast/index.tsx          | 2 +-
 src/components/ToastContainer/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx
index 92ae5a76f..a93c699fe 100644
--- a/src/components/Toast/index.tsx
+++ b/src/components/Toast/index.tsx
@@ -16,7 +16,7 @@ const Toast: React.FC<ToastProps> = ({
   transitionState,
 }) => {
   return (
-    <div className="flex items-end justify-center px-2 py-2 pointer-events-none toast sm:items-start sm:justify-end">
+    <div className="flex items-end justify-center max-w-full px-2 py-2 pointer-events-none toast sm:items-start sm:justify-end">
       <Transition
         show={transitionState === 'entered'}
         enter="transition duration-300 transform-gpu"
diff --git a/src/components/ToastContainer/index.tsx b/src/components/ToastContainer/index.tsx
index ea481737f..5f77e703a 100644
--- a/src/components/ToastContainer/index.tsx
+++ b/src/components/ToastContainer/index.tsx
@@ -8,7 +8,7 @@ const ToastContainer: React.FC<ToastContainerProps> = ({
   return (
     <div
       id="toast-container"
-      className="fixed max-w-full max-h-full overflow-hidden top-4 right-4"
+      className="box-border fixed right-0 max-w-full max-h-full px-4 overflow-hidden top-4"
       style={{
         pointerEvents: hasToasts ? 'all' : 'none',
         zIndex: 10000,