Move banners to bottom-right of the screen so it does not block important content

Author: HDinger

frontend/src/global_styles/content/_toast.sass

@@ -33,8 +33,8 @@
 
 $nm-font-size: var(--body-font-size)
 $nm-border-radius: rem-calc(2px)
-$nm-box-padding: rem-calc(10px 35px 10px 35px)
-$nm-toaster-width: rem-calc(550)
+$nm-box-padding: rem-calc(10px 40px 10px 40px)
+$nm-toaster-width: 25%
 
 $nm-color-success-border: var(--borderColor-success-muted)
 $nm-color-success-icon: var(--fgColor-success)
@@ -100,14 +100,13 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
   left: $left
   font-size: $size
 
-
-
 .op-toast
   @include spot-z-index("toast")
 
   display: flex
   box-shadow: rem-calc(1px 2px 3px) rgba(0, 0, 0, 0.2)
   border: rem-calc(1px) solid $nm-color-border
+  border-radius: var(--borderRadius-medium)
   font-size: $nm-font-size
   word-wrap: break-word
   position: relative
@@ -219,14 +218,18 @@ $nm-upload-box-padding: rem-calc(15) rem-calc(25)
 .op-toast--wrapper
   position: absolute
   max-width: $nm-toaster-width
-  margin: 0 auto
-  left: 10%
-  right: 10%
-
-.op-toast--wrapper
+  min-width: $nm-toaster-width
+  margin: 0
+  right: 2rem
+  bottom: 2rem
   // Higher than loading indicator and modal wrapper!
   z-index: 10000
-  top: 4rem
+
+  @media screen and (max-width: $breakpoint-md)
+    max-width: calc(100% - 2rem)
+    min-width: calc(100% - 2rem)
+    right: 1rem
+
 
   .op-toast--casing
     position: relative

frontend/src/global_styles/primer/_flash.sass

@@ -26,22 +26,26 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-$op-primer-flash-toaster-width: 80%
+$op-primer-flash-toaster-width: 25%
 
 .op-primer-flash
   z-index: 599
   position: absolute
   max-width: $op-primer-flash-toaster-width
-  margin: 0 auto
-  left: 10%
-  right: 10%
-  top: 1rem
+  min-width: $op-primer-flash-toaster-width
+  right: 2rem
+  bottom: 2rem
   background-color: var(--body-background)
 
   // Align multiple toasts
   display: flex
   flex-direction: column
   gap: 1rem
 
+  @media screen and (max-width: $breakpoint-md)
+    max-width: calc(100% - 2rem)
+    min-width: calc(100% - 2rem)
+    right: 1rem
+
   &--item
     word-wrap: break-word