Fix #3498: Non-responsive toast. (#3524)

Co-authored-by: Ulaş Turan <[email protected]>

components/lib/toast/Toast.css

@@ -1,6 +1,8 @@
 .p-toast {
     position: fixed;
-    width: 25rem;
+    width: 100%;
+    max-width: 25rem;
+    padding-left: 2rem;
 }
 
 .p-toast-message-content {
@@ -17,40 +19,40 @@
 }
 
 .p-toast-top-right {
-	top: 20px;
-	right: 20px;
+    top: 20px;
+    right: 20px;
 }
 
 .p-toast-top-left {
-	top: 20px;
-	left: 20px;
+    top: 20px;
+    left: 20px;
 }
 
 .p-toast-bottom-left {
-	bottom: 20px;
-	left: 20px;
+    bottom: 20px;
+    left: 20px;
 }
 
 .p-toast-bottom-right {
-	bottom: 20px;
-	right: 20px;
+    bottom: 20px;
+    right: 20px;
 }
 
 .p-toast-top-center {
-	top: 20px;
+    top: 20px;
     left: 50%;
     transform: translateX(-50%);
 }
 
 .p-toast-bottom-center {
-	bottom: 20px;
-	left: 50%;
+    bottom: 20px;
+    left: 50%;
     transform: translateX(-50%);
 }
 
 .p-toast-center {
-	left: 50%;
-	top: 50%;
+    left: 50%;
+    top: 50%;
     min-width: 20vw;
     transform: translate(-50%, -50%);
 }
@@ -64,7 +66,7 @@
 }
 
 .p-toast-icon-close.p-link {
-	cursor: pointer;
+    cursor: pointer;
 }
 
 /* Animations */
@@ -76,7 +78,7 @@
 .p-toast-message-enter-active {
     opacity: 1;
     transform: translateY(0);
-    transition: transform .3s, opacity .3s;
+    transition: transform 0.3s, opacity 0.3s;
 }
 
 .p-toast-message-enter-done {
@@ -93,5 +95,5 @@
     max-height: 0;
     margin-bottom: 0;
     overflow: hidden;
-    transition: max-height .45s cubic-bezier(0, 1, 0, 1), opacity .3s, margin-bottom .3s;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
 }