diff --git a/packages/toast/src/Toast.tsx b/packages/toast/src/Toast.tsx
index 17634ab14..886cc4606 100644
--- a/packages/toast/src/Toast.tsx
+++ b/packages/toast/src/Toast.tsx
@@ -12,20 +12,20 @@ const prefersReducedMotion = () => {
 const colorForToastType = (type: ToastType) => {
   switch (type) {
     case ToastType.Success:
-      return 'text-success'
+      return 'bg-success text-info-contrast md:text-success'
     case ToastType.Error:
-      return 'text-danger'
+      return 'bg-danger text-info-contrast md:text-danger'
     default:
-      return 'text-info'
+      return 'bg-info text-info-contrast md:text-info'
   }
 }
 
 const iconForToastType = (type: ToastType) => {
   switch (type) {
     case ToastType.Success:
-      return <CheckCircleFilledIcon className={`h-5 w-5 ${colorForToastType(type)}`} />
+      return <CheckCircleFilledIcon className="text-success h-5 w-5" />
     case ToastType.Error:
-      return <ClearCircleFilledIcon className={`h-5 w-5 ${colorForToastType(type)}`} />
+      return <ClearCircleFilledIcon className="text-danger h-5 w-5" />
     case ToastType.Progress:
     case ToastType.Loading:
       return <div className="border-info h-4 w-4 animate-spin rounded-full border border-solid border-r-transparent" />
@@ -77,7 +77,7 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
     <div
       data-index={index}
       role="status"
-      className={`bg-passive-5 animation-fill-forwards relative mt-3 flex min-w-max select-none flex-col rounded opacity-0 ${currentAnimation}`}
+      className={`bg-passive-5 animation-fill-forwards relative mt-3 flex min-w-full select-none flex-col rounded opacity-0 md:min-w-max ${currentAnimation}`}
       style={{
         boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.16)',
         transition: shouldReduceMotion ? undefined : 'all 0.2s ease',
@@ -90,18 +90,18 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
       }}
       ref={ref}
     >
-      <div className={`flex w-full items-center ${hasActions ? 'p-2 pl-3' : hasProgress ? 'px-3 py-2.5' : 'p-3'}`}>
-        {icon ? <div className="sn-icon mr-2 flex flex-shrink-0 items-center justify-center">{icon}</div> : null}
-        <div className="text-text text-sm">{toast.message}</div>
+      <div
+        className={`flex w-full flex-wrap items-center gap-2 ${
+          hasActions ? 'p-2 pl-3' : hasProgress ? 'px-3 py-2.5' : 'p-3'
+        }`}
+      >
+        {icon ? <div className="sn-icon flex flex-shrink-0 items-center justify-center">{icon}</div> : null}
+        <div className="text-text text-sm [word-wrap:anywhere]">{toast.message}</div>
         {hasActions && (
-          <div className="ml-4">
+          <>
             {toast.actions?.map((action, index) => (
               <button
-                style={{
-                  paddingLeft: '0.45rem',
-                  paddingRight: '0.45rem',
-                }}
-                className={`hover:bg-passive-3 cursor-pointer rounded border-0 bg-transparent py-1 text-sm font-semibold ${colorForToastType(
+                className={`hover:bg-passive-3 cursor-pointer rounded border-0 py-1 px-[0.45rem] text-sm font-semibold md:bg-transparent ${colorForToastType(
                   toast.type,
                 )} ${index !== 0 ? 'ml-2' : ''}`}
                 onClick={() => {
@@ -112,7 +112,7 @@ export const Toast = forwardRef(({ toast, index }: Props, ref: ForwardedRef<HTML
                 {action.label}
               </button>
             ))}
-          </div>
+          </>
         )}
       </div>
       {hasProgress && (
diff --git a/packages/toast/src/ToastContainer.tsx b/packages/toast/src/ToastContainer.tsx
index 769e6ed69..01e6033f6 100644
--- a/packages/toast/src/ToastContainer.tsx
+++ b/packages/toast/src/ToastContainer.tsx
@@ -11,7 +11,7 @@ export const ToastContainer: FunctionComponent = () => {
   }
 
   return (
-    <div className="z-toast fixed bottom-6 right-6 flex flex-col items-end">
+    <div className="z-toast fixed bottom-6 right-6 flex w-[calc(100%-3rem)] flex-col items-end md:w-auto">
       {toasts.map((toast, index) => (
         <ToastTimer toast={toast} index={index} key={toast.id} />
       ))}
diff --git a/packages/toast/src/ToastTimer.tsx b/packages/toast/src/ToastTimer.tsx
index e92c7b92b..190c1afbd 100644
--- a/packages/toast/src/ToastTimer.tsx
+++ b/packages/toast/src/ToastTimer.tsx
@@ -55,14 +55,6 @@ export const ToastTimer: FunctionComponent<Props> = ({ toast, index }) => {
     resumeTimer()
   }, [resumeTimer])
 
-  const handlePageVisibility = useCallback(() => {
-    if (document.visibilityState === 'hidden') {
-      pauseTimer()
-    } else {
-      resumeTimer()
-    }
-  }, [pauseTimer, resumeTimer])
-
   const handlePageFocus = useCallback(() => {
     resumeTimer()
   }, [resumeTimer])
@@ -83,7 +75,6 @@ export const ToastTimer: FunctionComponent<Props> = ({ toast, index }) => {
       toastElement.addEventListener('mouseenter', handleMouseEnter)
       toastElement.addEventListener('mouseleave', handleMouseLeave)
     }
-    document.addEventListener('visibilitychange', handlePageVisibility)
     window.addEventListener('focus', handlePageFocus)
     window.addEventListener('blur', handlePageBlur)
 
@@ -93,7 +84,6 @@ export const ToastTimer: FunctionComponent<Props> = ({ toast, index }) => {
         toastElement.removeEventListener('mouseenter', handleMouseEnter)
         toastElement.removeEventListener('mouseleave', handleMouseLeave)
       }
-      document.removeEventListener('visibilitychange', handlePageVisibility)
       window.removeEventListener('focus', handlePageFocus)
       window.removeEventListener('blur', handlePageBlur)
     }
@@ -105,7 +95,6 @@ export const ToastTimer: FunctionComponent<Props> = ({ toast, index }) => {
     handleMouseLeave,
     handlePageBlur,
     handlePageFocus,
-    handlePageVisibility,
     resumeTimer,
     shouldAutoClose,
     toast.id,
diff --git a/packages/web/src/stylesheets/_sn.scss b/packages/web/src/stylesheets/_sn.scss
index d43d6f29c..7962041f5 100644
--- a/packages/web/src/stylesheets/_sn.scss
+++ b/packages/web/src/stylesheets/_sn.scss
@@ -134,7 +134,7 @@
 
 .transparent-info-color-background {
   &::after {
-    @include DimmedBackground(var(--sn-stylekit-info-color), .12);
+    @include DimmedBackground(var(--sn-stylekit-info-color), 0.12);
     border-radius: 100px;
   }
 }
@@ -142,7 +142,7 @@
 .transparent-info-color-background-hover {
   &:hover {
     &::after {
-      @extend .transparent-info-color-background
+      @extend .transparent-info-color-background;
     }
   }
 }
